jQuery 网页倒计时:天-时-分-秒案例
发布时间:2018-11-20 编辑:小张博客 查看次数:7012
分享一段简单的代码基于 jquery 实现倒计时功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下。
引入 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
Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1
联系方式:[email protected] | 本站文章仅供学习和参考