gpt4 book ai didi

javascript - 响应我的命令的倒数计时器

转载 作者:可可西里 更新时间:2023-11-01 13:05:27 25 4
gpt4 key购买 nike

我正在尝试用 JavaScript 制作一个倒数计时器,特别是我可以将其设置为一分钟或两分钟,以及它何时开始的计时器。

这是我能够从头开始完成的,但我似乎无法让它发挥作用:

var tim = 90
var min = (tim / 60) >> 0;
var sec = tim % 60;
function set1() {
tim=60;
}
function set2() {
tim=120;
}
function start() { function{ setInterval(function(){ tim-1; }, 1000);
}
function display() {

document.getElementById("demo").innerHTML = min + ":" + sec ;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="display()">


<p id="demo"></p>
<button onclick="set1()"> set one minute</button>
<button onclick="set2()"> set two minute</button>
<button onclick="start()"> start </button>
</body>
</html>

我还尝试采用 here, 中的以下解决方案但无济于事。

function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);

// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;

minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;

display.textContent = minutes + ":" + seconds;

if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 05:00 not 04:59
start = Date.now() + 1000;
}
};
// we don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}

window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time"></span> minutes!</div>
</body>

我在这里错过了什么?

最佳答案

这是一种解决方案。基本上你只画一次时间。您需要在每次更新时绘制它。

您还遇到了一些问题,因为在设定的时间间隔内您再也没有分配变量 tim。

var timeLeft = 90

function set1() {
timeLeft=60;
display();
}

function set2() {
timeLeft=120;
display();
}

function start() {
setInterval(function(){
timeLeft = timeLeft -1;
display();
}, 1000);
}

function display() {
var min = (timeLeft / 60) >> 0;
var sec = timeLeft % 60;
document.getElementById("demo").innerHTML = min + ":" + sec ;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="display()">


<p id="demo"></p>
<button onclick="set1()"> set one minute</button>
<button onclick="set2()"> set two minute</button>
<button onclick="start()"> start </button>
</body>
</html>

关于javascript - 响应我的命令的倒数计时器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33748852/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com