HTML倒计时效果:天、时、分、秒 | 固定时间倒计时

需求分析:

希望制作一个固定时间倒计时效果,比如某某活动在4小时之后结束,点开网页,触发倒计时事件,开始4小时倒计时。考虑使用setInterval定时器,在时间为0后,clearInterval清除定时器。

代码实例:

写一个span用于显示,记得引用jQuery

HTML:

<body>
    <span id="timer"></span>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>

JS:

$(function(){
        var timeInt = setInterval(function(){leftTimer();},1000); //开始倒计时

        /*倒计时,可设定leftTime毫秒数为剩余时间*/
        var leftTime = 14400000;//剩余的毫秒数
        function leftTimer(){
          if(leftTime == 0){
             clearInterval(timeInt);
            /*此处可写倒计时结束后的动作*/
          }else{
            var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
            var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
            var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
            var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
            days = checkTime(days);
            hours = checkTime(hours);
            minutes = checkTime(minutes);
            seconds = checkTime(seconds);
            $("#timer").html(days+"天" + hours+"时" + minutes+"分"+seconds+"秒");
            leftTime = leftTime - 1000;
          } 
        }
        function checkTime(i){ //将0-9的数字前面加上0,例1变为01
            if(i<10)
            {
                i = "0" + i;
            }
            return i;
        }
});

效果:

JS Bin on jsbin.com

参考:http://www.jb51.net/article/97501.htm

感谢!

发表评论取消回复

退出移动版