獲取計時器從內存遊戲點擊後從0開始

Question

這是我的第一個問題。我正在尋找一個類似的話題，但我沒有找到我可以使用的答案。我想在我的記憶遊戲中得到一個顯示當前時間的計時器（我想使用Date對象）。我使用了這裏的功能How to create an accurate timer in javascript?，但是在第一次點擊卡片後，時間不會從0開始。它顯示自加載頁面以來已過去的時間。

//variable for timer 
var gameScore = $(".score-game"); 
var timer = $("#timer"); 
gameScore.html("0 seconds"); 
var hasGameStarted = false; 
var score = Date.now(); 

    //timer function 
    function countdownTimer() { 
     if (hasGameStarted !== true) { 
      scoreTimeout = setInterval(function() { 
       var delta = Date.now() - score; 
       gameScore.html(Math.floor(delta/1000) + " seconds"); 
      }, 1000); 
      hasGameStarted = true; 
     } 
    } 
cards.on('click', function() { 
countdownTimer(); 
}); 

如果你想看看是如何工作的我的遊戲，請瀏覽這個網站（現定時器的工作不錯，但不顯示從日期對象時間）：

https://borkson.github.io/Cars-Memory-Game/

對不起，我的英語： （

Answer 1

我理解你的代碼，你的意思是你開始通過增量變量計算出一個計時器，並更新每1000毫秒

//variable for timer 
 
var gameScore = $(".score-game"); 
 
var timer = $("#timer"); 
 
gameScore.html("0 seconds"); 
 
var hasGameStarted = false; 
 
var score = Date.now(); 
 

 
//timer function 
 
function countdownTimer() { 
 
    if (hasGameStarted !== true) { 
 
    scoreTimeout = setInterval(function() { 
 
     var delta = Date.now() - score; 
 
     gameScore.html(Math.floor(delta/1000) + " seconds"); 
 
    }, 1000); 
 
    hasGameStarted = true; 
 
    } 
 
} 
 

 
$("#cards").on('click', function() { 
 
    countdownTimer(); 
 
});

#cards { 
 
    border-radius: 25px; 
 
    background: #73AD21; 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<img id="cards"></img> 
 
<div class="score-game">score</div> 
 
<div id="timer">timer</div>

Answer 2

或許有一個更聰明的方式，但你能...

VAR STARTTIME = Date.now（）;

...然後在下面，在你的功能...

var delta = startTime - score;

這有幫助嗎？