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

我理解你的代码，你的意思是你启动一个由delta变量计算的计时器，每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 - 得分;

这有帮助吗？

点击内存游戏后，计时器从0开始

2 个答案: