在激活一个功能的按钮上显示经过的秒数

Display elapsed seconds on a button which also activates a function

本文关键字：按钮 显示 经过 功能 激活 一个      更新时间：2023-09-26

我正在制作一款简单的游戏:一个按钮从页面的左侧开始，每次点击它都会向右移动。点击20次后，到达页面末尾，"游戏"完成。我把这个角色演得很好。为此，按钮在单击时激活moveRight()函数，该函数创建一个"缓冲区"(只是一个带有一定区域的div元素)，该缓冲区漂浮在按钮的左侧。

现在我想添加一个计时器。我希望在"游戏"正在进行时，以秒为单位显示自第一次点击按钮以来所经过的时间。我认为只要每次单击按钮时更新时间就很简单-我只需向moveRight()函数添加一些代码，该函数在单击按钮时被激活。然而，我想更新的时间每当一个新的第二通过，而不是当一个按钮被按下。我不知道如何完成这件事。

我假设将涉及到while-loop，它将持续跟踪游戏正在玩的时间，并在1000毫秒过去时更新它。但是我这样做遇到了麻烦，因为循环不会终止，此外，我不知道我的脚本如何在调用时同时更新和执行moveRight()函数的时间。

这是文档的大部分:

JavaScript: 

var clickCount = 0;
var startTime;
var gameTime;
var gameStart = false;
var gameOver = false;
function startTimer() {
    startTime = new Date();
}
function moveRight() {
    if (clickCount == 0) {
        startTimer();
    }
    clickCount++;
    var buffer = document.createElement("div");
    buffer.style.backgroundColor = "navy";
    buffer.style.width = "5%";
    buffer.style.height = "50px";
    buffer.className = "buffer";
    var game = document.getElementById("div2");
    var button = document.getElementById("hitThis");
    if (clickCount < 20){
        game.insertBefore(buffer, button);
    }
    else if (clickCount == 20) {
        gameOver = true;
        game.replaceChild(buffer, button);
        var congrats = document.createElement("p");
        var textNode = document.createTextNode("Congrats! You completed the game.")
        congrats.appendChild(textNode);
        congrats.style.color = "gold";
        game.appendChild(congrats);
    }
}
/*
while (!gameOver) {
    if (gameStart) {
        gameTime = new Date();
        timePassed = gameTime.getTime() - startTime.getTime();
        document.getElementById("hitThis").innerHTML = (timePassed / 1000);
    }
}
*/
HTML: 

<body>
<div id="div2">
<p>Goal: Make this go across the screen by clicking it.</p>
<button id="hitThis" onclick="moveRight()">0</button>
</div>
</body>

听起来你想做这样的事情:

var timer = 0;
function startTimer() {
    setInterval(function () {
        timer++;
    }, 1000);
}

只要调用"startTimer()"当你想启动计时器，并使用计时器变量来跟踪秒通过。:) 

var timer;
var secondsElapsed = 0;
function startTimer() {
    timer = setInterval(function(){
       secondsElapsed++;
       $('#hitThis').html(secondsElapsed);//gives you the seconds elapsed
    },1000);
}

并修改您的整理else条件。只需添加clearInterval(timer); 

else if (clickCount == 20) {
        clearInterval(timer);
        gameOver = true;
        game.replaceChild(buffer, button);
        var congrats = document.createElement("p");
        var textNode = document.createTextNode("Congrats! You completed the game.")
        congrats.appendChild(textNode);
        congrats.style.color = "gold";
        game.appendChild(congrats);
    }
相关文章：