<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>倒计时</title>
</head>
<style>
.showTime {
font-size: 50px;
margin: 0 auto;
text-align: center;
}
</style>
<body>
<div class="time">
小时:<input type="number" min=0 max=24 name="hour"><br/>
分钟:<input type="number" min=0 max=60 name="minute"><br/>
<button onclick="submit()">提交</button>
</div>
<div class="showTime">
</div>
</body>
<script src="jquery-1.11.0.min.js"></script>
<script>
var time = 0;
function submit() {
// 获得时间
var hour = $("[name='hour']").val()!=""?$("[name='hour']").val():0;
var minute = $("[name='minute']").val()?$("[name='minute']").val():0;
time = hour * 3600 + minute * 60;
// 定时器启动第一次启动会延迟设定的时间
show();
// 开启定时器
interval = setInterval(() => {
show();
}, 1000);
}
// 显示时间
function show() {
var showHour = parseInt(time / 3600);
var showMinute = parseInt((time % 3600) / 60);
var showSecond = time % 60;
// 每次添加时间,需要将之前的时间清空
$(".showTime").empty()
.append(showHour<10?"0"+showHour:showHour).append(":")
.append(showMinute<10?"0"+showMinute:showMinute).append(":")
.append(showSecond<10?"0"+showSecond:showSecond);
if (--time<0) {
// 清除计时器
clearInterval(interval);
//到点自动停止计时器,也可做其他的事情
}
}
</script>
</html>
效果图