基于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 相关文章推荐
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 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
2020最新CPU的性能排名
2020/04/02 数码科技
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
JS之小练习代码
2008/10/12 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
vue中tab选项卡的实现思路
2018/11/25 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
浅谈Python的异常处理
2016/06/19 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Django数据库表反向生成实例解析
2018/02/06 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
wxPython实现列表增删改查功能
2019/11/19 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
大学生暑期实践感言
2014/02/26 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
长江三峡导游词
2015/01/31 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
观后感开头
2015/06/19 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫