<span class='day'></span> <span class='hour'></span> <span class="min"></span> <span class="second"></span> <button>清除定时器</button> </div> <script> //获得dom元素 var dd =document.querySelector('.day'); var hd =document.querySelector('.hour'); var md =document.querySelector('.min'); var sd =document.querySelector('.second'); var timer= setInterval(function() { // 先获得当前时间对象的时间戳 var now = +new Date(); //获得特定时间的时间戳 var future = +new Date('2020-01-01 00:00:00'); //获得毫秒差除1000 得到秒差 var cha = (future-now)/1000; console.log(cha); //计算总秒数对应的天 时分秒 var d = parseInt(cha /60 /60/24); d = d>10?d:'0'+d; var h = parseInt(cha /60/60%24); h=h>10 ? h:'0'+h; var m =parseInt(cha /60%60); m=m>10?m:'0'+m; var s = parseInt(cha%60); s= s>10?s:'0'+s; console.log(d,h,m,s);
<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>
.box {
width: 300px;;
height: 500px;
background-color: red;
margin: 0 auto;
}
.box span {
display:inline-block;
width: 50px;
height:50px;
margin:10px;
background-color: black;
color:#fff;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
距离2020元旦还有
<div class="box">
<span class='day'></span>
<span class='hour'></span>
<span class="min"></span>
<span class="second"></span>
<button>清除定时器</button> </div> <script> //获得dom元素
var dd =document.querySelector('.day');
var hd =document.querySelector('.hour');
var md =document.querySelector('.min');
var sd =document.querySelector('.second'); var timer= setInterval(function() { // 先获得当前时间对象的时间戳
var now = +new Date();
//获得特定时间的时间戳
var future = +new Date('2020-01-01 00:00:00');
//获得毫秒差除1000 得到秒差
var cha = (future-now)/1000;
console.log(cha); //计算总秒数对应的天 时分秒
var d = parseInt(cha /60 /60/24);
d = d>10?d:'0'+d;
var h = parseInt(cha /60/60%24);
h=h>10 ? h:'0'+h;
var m =parseInt(cha /60%60);
m=m>10?m:'0'+m;
var s = parseInt(cha%60);
s= s>10?s:'0'+s;
console.log(d,h,m,s);
dd.innerHTML=d+'天';
hd.innerHTML=h+'时';
md.innerHTML=m+'分';
sd.innerHTML=s+'秒';
}, 1000);
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
clearInterval(timer);
})
</script>
</body>
</html>