实现js倒计时

最新推荐文章于 2022-08-18 17:52:27 发布

薄雨

最新推荐文章于 2022-08-18 17:52:27 发布

阅读量218

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_39999684/article/details/111933727

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

思路，每秒展示一次目标时间和当前时间的差值

下面附上小小案例完整代码以供参考，有部分注释哦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
</head>
<body>
    <div id='countdown'>简单分享下js倒计时实现思路~~~</div>
    <script>
         (function(){
             //页面通过 id为countdown的div来展示倒计时
            let dom=document.getElementById('countdown');
            //new Date(time) time接受'2020-12-29 18:00:00'这样时间格式的日期数据
            function setcountdown(time,dom){
                //计算出目标时间和当前时间的时间戳差值，needTime单位秒
                let needTime=(new Date(time).getTime()-new Date().getTime())/1000 | 0;
                //目标时间小于当前时间停止函数
                if(needTime<=0) {
                    dom.textContent='目标时间要大于当前时间';
                    return;
                }
                //个位数转成字符串补0，为了展示时候好看
                let formatFn=n=>n<10?'0'+n:n;
                //有了差值needTime后，我们只需要每秒让needTime减一，然后转换下页面展示的日期格式
                let t=setInterval(()=>{
                    needTime-=1;
                    let d=needTime/60/60/24 | 0,
                    h=formatFn(needTime/60/60%24 | 0),
                    m=formatFn(needTime/60%60 | 0),
                    s=formatFn(needTime%60 | 0);
                    dom.textContent=`${d}天${h}时${m}分${s}秒`;
                    //这个差值减到<=0时，停止setInterval
                    if(needTime<=0){
                        clearInterval(t);
                    }
                },1000);
            }
            //调用函数
            setcountdown('2020-12-29 18:00:00',dom)
        }());
    </script>
</body>
</html>

薄雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现js倒计时

思路，每秒展示一次目标时间和当前时间的差值下面附上小小案例完整代码以供参考，有部分注释哦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时</title>
复制链接

扫一扫

专栏目录