javascript实现显示活动倒计时时间

浏览1307

image.png

效果预览:/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>

  • 暂无任何回答