Question

我目前正在使用Javascript开始初学者课程，我正在开发一个非常基本的项目，它本质上是一个反应计时器。这个想法是随机形状（仅方形或圆形）以随机间隔出现在随机位置，用户必须点击它们。

这是我到目前为止所拥有的：

＆＃13;

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();
});

＆＃13;

.disappear {
  display: none;
}

＆＃13;

<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>

＆＃13;

一切正常，除了反应计时器，我无法弄清楚如何让它工作。我在点击形状时创建了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 =“end”和id =“start”的DOM元素，所以你的onclick函数就失败了。必须在调试控制台中显示此错误。

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

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

我建议首先使用核心逻辑，然后您可以轻松地装饰您的应用程序。这是我的解决方案：

/* 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();

计算Javascript中2个事件之间的时间

2 个答案: