使用Javascript计算2个事件之间的时间

Question

我目前正在使用Javascript进行初学者课程，并且正在从事基本上是反应计时器的非常基本的项目。这个想法是随机的形状（只有正方形或圆形）随机出现在随机位置，用户必须点击它们。

这是我到目前为止有：

document.addEventListener("DOMContentLoaded", function() { 
 
    var shape = document.getElementById("shape"); 
 

 
    function generateRandomShape() { 
 
    console.log("TEST"); 
 
    var shapeType = ["50%", ""]; 
 
    var shapeColor = ["red", "green", "yellow", "purple", "orange", "brown", "gray", "black", "blue"]; 
 

 
    shape.classList.remove("disappear"); 
 
    shape.style.backgroundColor = shapeColor[Math.floor(Math.random() * shapeColor.length)]; 
 
    shape.style.height = Math.random() * 300 + "px"; 
 
    shape.style.width = shape.style.height; 
 
    shape.style.borderRadius = shapeType[Math.floor(Math.random() * shapeType.length)]; 
 
    shape.style.marginLeft = Math.random() * 700; 
 
    shape.style.marginTop = Math.random() * 300; 
 
    } 
 

 
    shape.onclick = function() { 
 
    var endTime = Date.now(); 
 
    var randomDelay = Math.random() * 3000; 
 
    var startTime = endTime - randomDelay; 
 
    var reaction = (endTime - startTime)/1000; 
 

 
    setTimeout(generateRandomShape, randomDelay); 
 
    shape.className = "disappear"; 
 

 
    document.getElementById("end").innerHTML = endTime; 
 
    document.getElementById("start").innerHTML = startTime; 
 
    document.getElementById("reactionTime").innerHTML = reaction; 
 
    } 
 
    
 
    generateRandomShape(); 
 
});

.disappear { 
 
    display: none; 
 
}

<h1>Test Your Reactions!</h1> 
 
<p>Click on the boxes and circles as quickly as you can!</p> 
 
<p>Your time is: <span id="reactionTime"></span> seconds</p> 
 
<div id="shape"></div> 
 
<div id="start"></div> 
 
<div id="end"></div> 
 
<div id="reactionTime"></div>

它所有的工作除了反应计时器确定，我只是不能工作如何得到这个工作。我在单击形状时创建了endTime变量，但无法使我的头部围绕startTime变量。如何存储形状出现的时间？显然，我在这里的尝试行不通，我可以很容易地看到为什么，但我无法弄清楚我应该放什么。任何帮助非常感谢！

Answer 1

让您在相同范围内生成形状和形状事件侦听器。

在同一范围内，创建两个变量来跟踪showTime，并且clickTime ...设置你的showTime当你生成一个随机的形状，设置你的事件侦听器内的点击时间，然后填入HTML。

var showTime, 
    clickTime; 

function generateShape() { 
    showTime = Date.now(); 
    ... 
} 

... 

shape.onClick = function() { 
    clickTime = Date.now(); 
    document.getElementById('reactionTime').innerHTML = clickTime - showTime; 
    ... 
} 

Answer 2

您的代码：有一个id = “结束” 和id =没有DOM元素 “开始”，让你的onclick功能，只不过没有在那里。您的调试控制台必须显示此错误。

使用常识就足以解决你的问题：

1. 商店只要创建你的形状的开始时间值。如果您想要一次出现多个形状，则全局变量是不够的。这取决于您的偏好，但更好的方法是将时间值存储为DOM属性，然后单击时可以从形状中检索它。
2. 单击时，生成另一个时间值，然后获取两个时间值之间的差异并将其打印在屏幕上。

我建议首先在核心逻辑上工作，然后你可以很容易地装饰你的应用程序。这是我的解决方案：

/* HTML: 
<h1>Test Your Reactions!</h1> 
<p>Click on the boxes and circles as quickly as you can!</p> 
<p>Your time is: <span id="reactionTime">0</span> seconds</p> 
<div id="shape">Click me!</div> 
*/ 
var shape = document.getElementById("shape"); 
var reactionResult = document.getElementById("reactionTime"); 

function generateRandomShape() { 
    // make the shape appear again 
    shape.classList.remove("disappear"); 
    // store creation time as attribute "start-time" 
    shape.setAttribute("start-time", new Date().toISOString()); 
    // decorate or change your shape style here ... 
}; 

shape.onclick = function() { 
    // make the shape disappear 
    shape.className = "disappear"; 
    // retrieving creating time from attribute "start-time" 
    var startTime = new Date(shape.getAttribute("start-time")); 
    // calculate reaction time 
    var reactionTime = new Date() - startTime; 
    // displaying reaction time 
    reactionResult.innerHTML = reactionTime/1000; 
    // creating next shape in random time 
    var randomDelay = Math.random() * 3000; 
    setTimeout(generateRandomShape, randomDelay); 
}; 

generateRandomShape();