jQuery 网页倒计时:天-时-分-秒案例

发布时间:2018-11-20 编辑:小张博客 查看次数:5159

分享一段简单的代码基于 jquery 实现倒计时功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下。


jQuery倒计时.jpg

引入 jquery 和 jquery.cookie

<script src=”http://libs.baidu.com/jquery/1.7.2/jquery.min.js”></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

引入 jquery.cookie 目的是防止用户退出再访问该页面时,倒计时重新计时,这并不是我们想要的结果,所以引入 jquery.cookie 来解决这个问题,我们将时间值写入 cookie,当用户再来访问该页面时,这时倒计时的初始值我们就从 cookie 里面来获取。

HTML

<div class="time-item">
    <span id="day_show">0天</span>
    <strong id="hour_show">0时</strong>
    <strong id="minute_show">0分</strong>
    <strong id="second_show">0秒</strong>
</div>

CSS

 .time-item strong {
        background:#009999; /* #00bcd4 */
        color:#fff;
        line-height:49px;
        font-size:36px;
        font-family:Arial;
        padding:0 10px;
        margin-right:10px;
        border-radius:5px;
        box-shadow:1px 1px 3px rgba(0,0,0,0.2);
    }
    #day_show {
        float:left;
        line-height:49px;
        color:#c71c60;
        font-size:32px;
        margin:0 10px;
        font-family:Arial,Helvetica,sans-serif;
    }
    .item-title .unit {
        background:none;
        line-height:49px;
        font-size:24px;
        padding:0 10px;
        float:left;
    }

jquery

// 倒计时
function timer(intDiff){
     var interval = window.setInterval(function(){
        var day=0,
            hour=0,
            minute=0,
            second=0;//时间默认值
        if(intDiff > 0){
            day = Math.floor(intDiff / (60 * 60 * 24));
            hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
        }
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
        if(intDiff < 1){
            alert('考试时间到,请交卷。');
            clearInterval(interval); //清除定时器  $.removeCookie('name',{ path: '/'}); //path为指定路径,直接删除该路径下的cookie
        }
	 $('#day_show').html(day+"天");
        $('#hour_show').html('<s id="h"></s>'+hour+'时');
        $('#minute_show').html('<s></s>'+minute+'分');
        $('#second_show').html('<s></s>'+second+'秒');
     //  intDiff--;
       $.cookie('intDiff',intDiff--,{domain:'127.0.0.1',path:'/'});
    }, 1000);
}
$(document).ready(function(){
    var number = '';
    var intDiff = $.cookie('intDiff');
    if(!intDiff) { // 倒计时总秒数量
        number = 7200
    }else{
        number = intDiff
    }
 timer(parseInt(number)) ;//考试倒计时
});


参考文档:

jQuery倒计时:http://www.jq22.com/jquery-info327




出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号