<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<div id="time"></div>
<div onclick="start()">开始</div>
<div onclick="pasue()">暂停</div>
<script>
var totalTime = 1 * 60; // 1分钟
var timeInter = null
function timeFun() {
timeInter = setInterval(updataTime, 1000)
}
function updataTime() {
if (totalTime == 0) {
clearInterval(timeInter);
return false
}
totalTime = totalTime - 1;
var timeStr = formateTime(totalTime);
$("#time").html(timeStr);
console.log('totalTime ', totalTime);
}
// 格式化时间
function formateTime(time) {
var h = 0;
var m = 0;
var s = time;
var str = "";
if (s >= 60) {
m = parseInt(time / 60);
s = parseInt(time % 60);
if (m >= 60) {
h = parseInt(m / 60);
m = parseInt(m % 60);
}
}
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
str = h + ':' + m + ':' + s
return str
}
// 开始
function start() {
timeFun();
}
// 暂停
function pasue() {
clearInterval(timeInter);
}
timeFun()
</script>
</body>
</html>
