js之网页倒计时效果

Posted 追寻-我心

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js之网页倒计时效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript">
        window.onload=function(){
            //倒计时函数
            function djs(){
                var fur_time=new Date(2017,5,30,10,30,0); //设置时间2017年5月30日
        //创建当前时间
        var now_time=new Date();
        
        
        //计算两个日期之间的时间差
        var diff=fur_time.getTime()-now_time.getTime();
        //alert(diff);
        var tian=parseInt(diff/(24*60*60*1000));//计算剩余多少天
        //获得计算完天数后还剩余的毫秒数
        diff=diff%(24*60*60*1000);
        //计算小时数
        var xiaoshi=parseInt(diff/(60*60*1000));
        //计算完小时后剩余的毫秒数
        diff=diff%(60*60*1000);
        //获得分钟数
        var fenzhong=parseInt(diff/(60*1000));
        //计算完分钟数后 的毫秒数
        diff=diff%(60*1000);
        
        //计算秒
        var miao=parseInt(diff/1000);
        //document.write(‘剩余时间还有‘+tian+‘天‘+xiaoshi+‘小时‘+fenzhong+‘分钟‘+miao+‘秒‘);
        var ss=document.getElementById(‘time‘).getElementsByTagName(‘span‘);
        ss[0].innerHTML=tian;
        ss[1].innerHTML=xiaoshi;
        ss[2].innerHTML=fenzhong;
        ss[3].innerHTML=miao;
        
            
            }
        djs();
        
        //用来倒计时的定时器
                setInterval(djs,1000);
        }
    </script>
    <body>
        <h2 id="time">剩余时间还有<span>0</span>天<span>0</span>小时<span>0</span>分<span>0</span>秒</h2>
    </body>
</html>

 

以上是关于js之网页倒计时效果的主要内容，如果未能解决你的问题，请参考以下文章

求每天距下班时间倒计时JS代码

炫酷 CSS 背景效果的 10 个代码片段

JS 倒计时问题,手机网页后台运行时，js会暂停

网页上有10秒倒计时，完了后就自动跳转到另一个网页上html代码？

JS倒计时网页自动跳转代码

JUC并发编程 共享模式之工具 JUC CountdownLatch（倒计时锁） -- CountdownLatch应用（等待多个线程准备完毕（ 可以覆盖上次的打印内）等待多个远程调用结束）(代码片段