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

2020-11-30   阅读:1848   分类:前端    标签: JavaScript

image.png

效果预览: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>
【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/fdetail/528.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×