使用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();