Js实现倒计时的效果
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
div { width: 300px
;
height: 60px
;
line-height: 35px
;
text-align: center
;
border: 1px solid #000
;
}
</style>
</head>
<body>
<div id=
"box"></div>
<script>
var o = document.
getElementById("box");//获取页面中的div
function showTime() {
var endDate = new
Date("2020/1/1/12:00:00") ;
var newDate = new
Date();
var num =
(endDate.
getTime() - newDate.
getTime()) / 1000
;
var hour =
parseInt(num / 60 / 60
);
if (hour < 10) {
hour =
"0" + hour
;
}
var minute =
parseInt(num / 60
) % 60
;
if (minute < 10) {
minute =
"0" + minute
;
};
var second =
parseInt(num % 60
);
if (second < 10) {
second =
"0" + second
;
};
var time =
"距离2019年10月30号00:00:00:还剩" + hour +
":" + minute +
":" + second
;
o.innerHTML = time
;
setTimeout(showTime, 1000
);
}
showTime();
</script>
</body>
</html>
注意: 1.实现倒计时的前提一定要获取当前时间和截至时间。 2.用getTime()方法(返回 1970 年 1 月 1 日至今的毫秒数。)拿截至时间减去当前时间就得出了时间差,然后进行换算就可以了。