Question

如何在javasscript中获得touchstart和touchend之间的时间。

    // define startTime variable
    var startTime = 0;

    function initi() {
        console.log('init');
        // Get a reference to our touch-sensitive element
        var touchzone = document.getElementById("myCanvas");
        // Add an event handler for the touchstart event
        touchzone.addEventListener("mousedown", startTouch, false);
        // You need mouseup to capture the stop event                          
        touchzone.addEventListener("mouseup", stopTouch, false);
    }

    function startTouch(event) {
        // You can access the event here too..
        // But for demo I will only get the current Time

        startTime = new Date().getTime();
    }

    function stopTouch(event) {
        // Get a reference to our coordinates div
        var can = document.getElementById("myCanvas");
        // Write the coordinates of the touch to the div
        if (event.pageX < x * 100 && event.pageY > y * 10) {
            // Calculate the duration, only if needed
            var duration = new Date().getTime() - startTime;

            bally -= 0.001 * duration; // use duration
        }

        // I hope bally if defined in the outer scope somewhere ;)                    
        console.log(event, x, bally);
        draw();
    }

touchstart和touchend之间的时间越长，球的移动越多，但我怎样才能获得touchevent的时间/长度？

Answer 1

var startTime = 0;
function start() {
   startTime = new Date().getTime();
}

function stop() {
  var duration = (new Date().getTime() - startTime);
  growBar(duration);
}

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var ms = document.getElementById('ms');
clickEle.onmousedown = start;
clickEle.onmouseup = stop;

function growBar(timerCount) {
    ms.innerHTML = timerCount;
    timerEle.setAttribute("style", "width:" + timerCount + "px;");
}

.bar {
  height: 10px;
  width: 100%;
  background: black;
}
.timer {
  width: 0;
  height: 100%;
  background: red;
}

<button id="button-id">Click This!</button>
<div><strong id="ms"></strong> ms</div>
<div class="bar">
  <div class="timer"></div>
</div>

Answer 2

您可以启动任意数毫秒的Javascript间隔（取决于所需的“平滑度”）。请参阅下面的内容，模仿您可以做的事情，只使用mousedown和mouseup事件。

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var COUNTER_INCREMENT = 10; // In milliseconds
var timerCount = 0;
var timer = null;

clickEle.onmousedown = startTimer;
clickEle.onmouseup = stopTimer;

function startTimer() {
  timer = setInterval(incrementTimer, COUNTER_INCREMENT);
}

function incrementTimer() {
  timerCount += COUNTER_INCREMENT;

  // For Demo purposes only
  timerEle.innerHTML = timerCount;
}

function stopTimer() {
  clearInterval(timer);
  timerCount = 0;
}

<button>Click This!</button>
<p>
  <strong>How Long Was the Mouse Held Down for?</strong>
  <span class="timer">0</span> milliseconds
</p>

或者你可以使用更优化的requestAnimationFrame，但它的可用性取决于你支持的浏览器。 https://css-tricks.com/using-requestanimationframe/

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var COUNTER_INCREMENT = 10; // In milliseconds
var startTime = 0;
var timerCount = 0;
var timer = null;

clickEle.onmousedown = startTimer;
clickEle.onmouseup = stopTimer;

function startTimer() {
  timer = window.requestAnimationFrame(incrementTimer);
  startTime = new Date();
}

function incrementTimer() {
  var newTimerCount = new Date() - startTime;

  // Update the DOM sparingly
  if(newTimerCount - timerCount > COUNTER_INCREMENT) {
    // For Demo purposes only
    timerEle.innerHTML = timerCount = newTimerCount;
  }
  timer = window.requestAnimationFrame(incrementTimer)
}

function stopTimer() {
  cancelAnimationFrame(timer);
  timerCount = 0;
}

<button>Click This!</button>
<p>
  <strong>How Long Was the Mouse Held Down for?</strong>
  <span class="timer">0</span> milliseconds
</p>

Answer 3

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var msEle = document.getElementById('ms');
var COUNTER_INCREMENT = 1; // In milliseconds
var timerCount = 0;
var timer = null;

clickEle.onmousedown = startTimer;
clickEle.onmouseup = stopTimer;

var ms = 0;
function startTimer() {
  ms = new Date().getTime();
  timer = setInterval(incrementTimer, COUNTER_INCREMENT);
}

function incrementTimer() {
  timerCount += COUNTER_INCREMENT;

  // For Demo purposes only
  timerEle.innerHTML = timerCount;
}

function stopTimer() {
  clearInterval(timer);
  timerCount = 0;
  msEle.innerHTML = new Date().getTime() - ms;
}

<button>Click This!</button>
<p>
  <strong>How Long Was the Mouse Held Down for?</strong>
  <span class="timer">0</span> milliseconds
</p>
<p><span id="ms"></span> real milliseconds</p>

Answer 4

您必须在＆＃34;外部范围＆＃34;中的某处定义startTime变量，其中两个函数都可以访问。当你调用第一个函数时它只会改变它的值，第二个函数也可以访问变量;）

var startTime = 0;
function one() {
   startTime = new Date().getTime();
}

function two() {
  var duration = new Date().getTime() - startime;
  console.log(duration + 'ms between one() and two()');
}

var btn = document.getElementById('some-btn-id');
btn.onmousedown = one;
btn.onmouseup = two;

获得touchevent的长度

4 个答案: