JavaScript实现页面显示倒计时功能

下面是用JS中的日期函数和定时器完成的一个倒计时的例子，效果如图：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>倒计时</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <input type="button" onclick="daojishi();" value="开始倒计时"/>
        <div id="daojishi"></div>
    </body>
    <script type="text/JavaScript">

        function daojishi(){
            //获取当前时间
            var nowTime = new Date();
            //获取活动结束时间，这里注意，月份是0-11
            var EndTime = new Date(2018,05,11,15,24,0);
            //比较活动结束日期和当前时间
            var chaTime = EndTime.getTime() - nowTime.getTime();

            var nMS = 0;
            if (chaTime > 0){
                nMS = chaTime;
            }if (chaTime == 0){
                alert("活动时间到");
                return;
            }else if(chaTime < 0){
                alert("活动已过期");
                return;
            }

            //floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。
            var nD = Math.floor(nMS / (1000 * 60 * 60) / 24);//天
            var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;//时
            var nM = Math.floor(nMS / (1000 * 60)) % 60;//分
            var nS = Math.floor(nMS / 1000) % 60;//秒

            if (nH < 10) {
                nH = '0' + nH;
            }
            if (nM < 10) {
                nM = '0' + nM;
            }
            if (nS < 10) {
                nS = '0' + nS;
            }

            document.getElementById("daojishi").innerHTML = "<span>"+nD+"</span>天<span>"+nH+"</span>时<span>"+nM+"</span>分<span>"+nS+"</span>秒";
            
            //定时器
            setTimeout(function() {
                daojishi();
            }, 1000);
        }
    </script>
</html>

 

posted @ 2017-05-04 13:47  一线大码  Views(1622)  Comments(0)  Edit  收藏  举报