基于jQuery实现美观且实用的倒计时实例代码


Posted in Javascript onDecember 30, 2015

倒计时效果有着广泛的应用,比如奥运会倒计时、高考倒计时和放假倒计时等,本章节分享一个比较美观且实用的倒计时效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>倒计时效果代码</title>
<style type="text/css">
* {
 padding:0;
 margin:0;
}
.colockbox {
 width:250px;
 height:30px;
 overflow:hidden;
 color:#000000;
 background:url(mytest/jQuery/colockbg.png) no-repeat;
 margin:0px auto;
}
.colockbox span {
 float:left;
 display:block;
 width:40px;
 height:29px;
 line-height:29px;
 font-size:20px;
 font-weight:bold;
 text-align:center;
 color:#ffffff;
 margin-right:22px;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
 countDown("2016/2/3 6:30:59","#colockbox1"); 
}); 
function countDown(time,id){ 
 var day_elem=$(id).find('.day'); 
 var hour_elem=$(id).find('.hour'); 
 var minute_elem=$(id).find('.minute'); 
 var second_elem=$(id).find('.second'); 
 var end_time = new Date(time).getTime();
 var sys_second = (end_time-new Date().getTime())/1000; 
 var timer = setInterval(function(){ 
  if(sys_second>1) { 
   sys_second-=1; 
   var day=Math.floor((sys_second/3600)/24); 
   var hour=Math.floor((sys_second/3600)%24); 
   var minute=Math.floor((sys_second/60)%60); 
   var second=Math.floor(sys_second%60); 
   $(day_elem).text(day);
   $(hour_elem).text(hour<10?"0"+hour:hour);
   $(minute_elem).text(minute<10?"0"+minute:minute); 
   $(second_elem).text(second<10?"0"+second:second);
  } 
  else { 
   clearInterval(timer); 
  } 
 }, 1000); 
} 
</script>
</head>
<body>
<div class="colockbox" id="colockbox1"> 
 <span class="day">00</span> 
 <span class="hour">00</span> 
 <span class="minute">00</span> 
 <span class="second">00</span> 
</div>
</body>
</html>

以上代码实现了我们的要求,可以实现秒到天的倒计时效果,下面就介绍一下实现过程。

一.实现原理:

原理比较简单,就是取得到期时间的时间戳减去当前时间的时间戳,就是两者之间相差的秒数,然后通过这个秒数除以3600就是相差的小时数,然后再除以24,然后使用Math.floor()函数进行下舍入,就是相差的天数,下面获取小时、分钟和秒都是此原理。使用定时器函数每隔一秒调用一次相应的函数就实现了倒计时的效果。

二.代码注释:

1.$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.countDown("2016/2/3 6:30:59","#colockbox1"),调用函数,第一个参数是到期的时间,第二个是div的id属性值。
3.function countDown(time,id){},声明此函数。
4.var day_elem=$(id).find('.day'),获取div下class属性值为day的对象。
5.var hour_elem=$(id).find('.hour'),获取div下class属性值为hour的对象。
6.var minute_elem=$(id).find('.minute'),获取div下class属性值为minute的对象。
7.var second_elem=$(id).find('.second'),获取div下class属性值为second的对象。
8.var end_time=new Date(time).getTime(),获取到期事件的时间戳。
9.var sys_second=(end_time-new Date().getTime())/1000,获取到期时间和当前时间相差的秒数。
10.var timer=setInterval(function(){},1000),每隔一秒执行一次函数。
11.if(sys_second>1) ,如果相差的秒大于1。
12.sys_second-=1,秒减一。
13.var day=Math.floor((sys_second/3600)/24),获取相差的天数。
14.var hour=Math.floor((sys_second/3600)%24),获取相差的小时数,注意后面是取模运算。
15.var minute=Math.floor((sys_second/60)%60),获取相差的分钟数。
16.var second=Math.floor(sys_second%60),获取相差的秒数。
17.$(day_elem).text(day),将天写入span元素。
18.$(hour_elem).text(hour<10?"0"+hour:hour),将小时写入span,如果小时数小于10,前面加0,后面同样的道理。
19.clearInterval(timer),如果相差的秒数到0,就停止计时器函数setInterval的执行。

以上内容是小编给大家分享的基于jQuery实现美观且实用的倒计时实例代码,希望本文分享能够给大家带来帮助。

Javascript 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
Sort()函数的多种用法
Mar 20 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
浅析java线程中断的办法
Jul 29 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 #Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 #Javascript
JavaScript阻止回车提交表单的方法
Dec 30 #Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 #Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 #Javascript
JavaScript小技巧整理
Dec 30 #Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 #Javascript
You might like
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
PHP 多进程 解决难题
2009/06/22 PHP
php下Memcached入门实例解析
2015/01/05 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
Python编程之event对象的用法实例分析
2017/03/23 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python openpyxl使用方法详解
2019/07/18 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python 如何区分return和yield
2020/09/22 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
公司授权委托书
2014/04/04 职场文书
创新社会管理心得体会
2014/09/12 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
Python读取和写入Excel数据
2022/04/20 Python