网站上倒计时很常见，比如秒杀倒计时，支付时间倒计时等等。
今天我们介绍一下用js实现一个十分钟倒计时。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js十分钟倒计时</title>
</head>
<body>
<div style="padding: 15px 0;">
<span>剩余时间</span>
<span id="timer">10:00:00</span>
</div>
<script>
//支付倒计时
let maxTime = 10 * 60; //定义十分钟
let ms = 9; //毫秒
let step = -1; //减少量
function payCountDown() {
if (maxTime > 0) {
ms += step;
if (ms < 0) {
ms = 9;
}
let minutes = Math.floor(maxTime / 60) >= 10 ? Math.floor(maxTime / 60) : '0' + Math.floor(maxTime / 60);
let seconds = Math.floor(maxTime % 60) >= 10 ? Math.floor(maxTime % 60) : '0' + Math.floor(maxTime % 60);
let msg = minutes + ":" + seconds + ":" + "0"+ms;
document.getElementById("timer").innerText = msg;
maxTime -= 0.1;
} else {
document.getElementById("timer").innerText = "00:00:00";
clearInterval(timer);
}
}
timer = setInterval("payCountDown()", 100);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js十分钟倒计时</title>
</head>
<body>
<div style="padding: 15px 0;">
<span>剩余时间</span>
<span id="timer">10:00:00</span>
</div>
<script>
//支付倒计时
let maxTime = 10 * 60; //定义十分钟
let ms = 9; //毫秒
let step = -1; //减少量
function payCountDown() {
if (maxTime > 0) {
ms += step;
if (ms < 0) {
ms = 9;
}
let minutes = Math.floor(maxTime / 60) >= 10 ? Math.floor(maxTime / 60) : '0' + Math.floor(maxTime / 60);
let seconds = Math.floor(maxTime % 60) >= 10 ? Math.floor(maxTime % 60) : '0' + Math.floor(maxTime % 60);
let msg = minutes + ":" + seconds + ":" + "0"+ms;
document.getElementById("timer").innerText = msg;
maxTime -= 0.1;
} else {
document.getElementById("timer").innerText = "00:00:00";
clearInterval(timer);
}
}
timer = setInterval("payCountDown()", 100);
</script>
</body>
</html>
