效果预览:https://www.tpxhm.com/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>
文章评论(0)