JavaScript倒计时

最新推荐文章于 2024-05-28 21:48:41 发布

隐藏用户y

最新推荐文章于 2024-05-28 21:48:41 发布

阅读量325

点赞数

分类专栏：前端入门文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_55355282/article/details/127832424

版权

前端入门专栏收录该内容

42 篇文章 0 订阅

订阅专栏

序言

之前的团购活动经常使用到倒计时

今天学习js倒计时

我感觉最难的就是代码中最长的这一句，还有就是cutDown函数返回值里面的时间的计算，应该是我基础还不太行，慢慢来吧

    <script>
        function cutDown(target){
            //获取当前时间
            var currentDate=new Date();
            //计算传入时间和现在时间的时间差(毫秒数)
            var v=Math.abs(target-currentDate);

            // 把毫秒转换成对应的天时分秒
            return{
                d:parseInt(v/(24*3600000)),
                h:parseInt(v%(24*3600000)/3600000),
                m:parseInt(v%(24*3600000)%3600000/60000),
                s:parseInt(v%(24*3600000)%3600000%60000/1000),
            };
        }
        /**
         * 1s=1000ms            1000
         * 1min=60*1000         60000
         * 1h=60*60*1000        3600000
         * 1d=24*60*60*1000     86400000
         */
        window.onload=function(){
            var d1=document.getElementById("d1");
            var d2=document.getElementById("d2");

            var target1=new Date(2100,8,18);
            var target2=new Date(2001,8,18);

            // 定时器每秒更新
            setInterval(function(){
                d1.innerHTML='离2100年9月18日还有'+cutDown(target1).d+'天'+cutDown(target1).h+'时'+cutDown(target1).m+'分'+cutDown(target1).s+'秒';
          
                d2.innerHTML='离2001年9月18日已经过了'+cutDown(target2).d+'天'+cutDown(target2).h+'时'+cutDown(target2).m+'分'+cutDown(target2).s+'秒';
            },1000);
        }
    </script>
    <div id="d1"></div>
    <div id="d2"></div>

编写cutDown函数，首先获取当前时间，再声明一个变量计算时间差（取绝对值）。设置函数的返回值为天，小时，分钟，秒数。

介绍一下window.onload（)

window.onload () 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。 window.onload () 通常用于 <body> 元素，在页面完全载入后 (包括图片、css文件等等)执行脚本代码。

在 window.onload（）方法里面获取页面中的两个div，用来显示案例。