基于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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
vue无限轮播插件代码实例
May 10 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
JS中准确判断变量类型的方法
Jun 01 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
layui动态加载多表头的实例
2019/09/05 Javascript
python设置检查点简单实现代码
2014/07/01 Python
通过C++学习Python
2015/01/20 Python
Python实现针对中文排序的方法
2017/05/09 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
浅析Python 序列化与反序列化
2020/08/05 Python
python Zmail模块简介与使用示例
2020/12/19 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
追悼会上的答谢词
2014/01/10 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
病危通知单
2015/04/17 职场文书
民事诉讼代理词
2015/05/25 职场文书
就业推荐表院系意见
2015/06/05 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
配置Kubernetes外网访问集群
2022/03/31 Servers
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js