
效果预览:/mdetail/4.html
活动倒计时,我们在很多APP中或者购物网站经常可以看到,比如京东、淘宝、拼多多等。以下是一个简单的实现动态倒计时功能,只需传入当前时间即可。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function overtime(){
var j=setTimeout(overtime,1000);
//创建时间
var date=new Date();
//获取年月日小时分钟秒
//设置结束时间
var sys_starttime="2020/11/21 10:02:00"
var dateb=new Date(sys_starttime);
//接受结束时间
var str=dateb.getTime();
//时间差
var LiftTime=str-date;
//倒计时时间
var d,h,m,s;
d=Math.floor(LiftTime/1000/60/60/24);
h=Math.floor(LiftTime/1000/60/60%24);
m=Math.floor(LiftTime/1000/60%60);
s=Math.floor(LiftTime/1000%60);
if(LiftTime>1){
document.getElementById("m").innerHTML='<span><i></i>简忆博客提醒您:</span>本活动还有'+'<span>'+d+'</span>天'+'<span>'+h+'</span>'+'小时'+'<span>'+m+'</span>分钟'+'<span>'+s+'</span>秒结束';
}
else{
document.getElementById("m").innerHTML='本次活动已结束';
clearInterval(j)
}
}
</script>
</head>
<body>
<pid="m"></p>
</body>
</html>