<!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="./jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.startTime{
color: red;
width: 400px;
margin: 0 auto;
font-size: 50px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="startTime">
<span id="fz">--</span>分<span id="mz">--</span>秒
</div>
</body>
<script>
$(function () {
//倒计时需要的秒数
var time = 1200;
var intervalDate = setInterval(function () {
if(time % 60 > 0){
$("#fz").html(fommterNUm(Math.floor(time / 60)));
}
if(time % 60 != 0 ){
$("#mz").html(fommterNUm(time % 60));
}
if(time == 0){
$("#fz").html('--');
$("#mz").html('--');
$(".startTime").empty().append('<p>计时结束</p>');
clearInterval(intervalDate);
}
time -= 1;
}, 1000);
})
//格式化数字,小于10的补0
function fommterNUm(num){
if(num < 10 ){
return '0' + num;
}else{
return num;
}
}
</script>
</html>