您的位置:首页 > Web前端 > JavaScript

web端用js实现倒计时

2017-01-12 18:37 507 查看
[html] view
plain copy

<html>  

    <head>  

        <title>倒计时</title>  

        <!--以下为css样式-->  

        <style type= "text/css">  

            .daojishi h2  

            {   

                font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;   

                font-size:14px;  

                margin-bottom:5px;   

                color:#151515;  

            }  

            .daojishi #timer  

            {  

                font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;   

                font-size:14px;  

                color:#151515;  

                font-weight:bold;  

            }  

        </style>  

        <script type = "text/javascript" src = "timer.js">  

        </script>  

    </head>  

    <body onload = "timer()">  

        <div class = "daojishi">  

            <h2>剩余时间为:</h2>  

            <div id = "timer">  

            </div>  

        </div>  

    </body>  

</html>  

timer.js

 

[javascript] view
plain copy

function timer()  

            {  

                var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数  

                var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数  

                var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数  

                var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数  

                var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数  

                dd = checkTime(dd);  

                hh = checkTime(hh);  

                mm = checkTime(mm);  

                ss = checkTime(ss);  

                document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";  

                setInterval("timer()",1000);  

            }  

            function checkTime(i)    

            {    

               if (i < 10) {    

                   i = "0" + i;    

                }    

               return i;    

            }   
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: