基于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 Event学习第六章 事件的访问
Feb 07 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
详解使用mpvue开发github小程序总结
Jul 25 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
js常用DOM方法详解
2017/02/04 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
vue--vuex详解
2019/04/15 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
python实现备份目录的方法
2015/08/03 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python实现排序算法解析
2018/09/08 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Django 自定义分页器的实现代码
2019/11/24 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
医学护理系毕业生求职信
2013/10/01 职场文书
师说教学反思
2014/02/07 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python