基于jQuery实现美观且实用的倒计时实例代码
倒计时效果有着广泛的应用，比如奥运会倒计时、高考倒计时和放假倒计时等，本章节分享一个比较美观且实用的倒计时效果。
代码实例如下:
<!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实现美观且实用的倒计时实例代码，希望本文分享能够给大家带来帮助。
相关推荐
-
jquery简单倒计时实现方法
本文实例讲述了jquery简单倒计时实现方法.分享给大家供大家参考,具体如下: var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 2
-
jquery实现的判断倒计时是否结束代码
本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用. 代码如下: function done(){ var str=$('#end').text(); var out=str.match(/\d+/g); console.log(out); var h=parseInt(out[0]),m=parseInt(out[1]),s=pa
-
jquery实现倒计时功能
本文实例为大家分享了jquery倒计时功能的实现代码,供大家参考,具体内容如下 定义和用法: setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 下面举例 <html> <head> <meta charset="utf-8&
-
jQuery倒计时代码(超简单)
具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> </body> <script
-
JQuery实现的按钮倒计时效果
本文实例讲述了JQuery实现的按钮倒计时效果.分享给大家供大家参考,具体如下: 一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如下: <html> <head> <title>test count down button</title> <script src="jquery1.8.3.min.js" type="text/javascript"></script&g
-
基于jQuery实现美观且实用的倒计时实例代码
倒计时效果有着广泛的应用,比如奥运会倒计时.高考倒计时和放假倒计时等,本章节分享一个比较美观且实用的倒计时效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>倒计时效果代
-
基于jQuery实现的Ajax 验证用户名唯一性实例代码
JSP部分代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <%@include file="/common/header.jsp"%> <title>用户管理</title> <script type="text/javascript&quo
-
基于jQuery实现点击弹出层实例代码
jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit
-
jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述: 注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果: 首先检测手机是否符合1开头,11位数字的格式: 若不符合,则提示错误信息并返回false: 否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: --------------------------------效果演
-
基于jQuery实现Ajax验证用户名是否可用实例
本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/jquery_aj
-
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
基于jQuery实现仿搜狐辩论投票动画代码 ,一款个性的卡通小人正方反方辩论投票特效代码.移动动画效果平滑自然.具有非常好的用户体验.该源码兼容目前最新的各类主流浏览器. 效果演示 源码下载 html代码: <script type="text/javascript"> $(document).ready(function () { var a = 500; var b = 130; $("#white").animate({ width: 0, l
-
基于jQuery实现仿QQ空间送礼物功能代码
我们在QQ空间里面有一个送礼物的功能,显示了最近过生日的人.我们只要把鼠标放到如下图的生日快乐那标签上,就会显示可以给该人送的礼物!! 如下图所示: 单击其中的一个礼物,就会马上送出去.但是我们现在是要说的还有单击更多的时候,会另外弹出一个新的窗口在当前页面最前面!如下图显示: 怎么实现那上面的功能呢? 就是把鼠标放上去,弹出一天tips,单击tips里面的控件,之后弹出另外一个弹出框. 网上就会有很多比较好的插件,就先到网上去找了相对应的jquery插件. jquery中tips的有很多插件,
-
基于 Immutable.js 实现撤销重做功能的实例代码
浏览器的功能越来越强大,许多原来由其他客户端提供的功能渐渐转移到了前端,前端应用也越来越复杂.许多前端应用,尤其是一些在线编辑软件,运行时需要不断处理用户的交互,提供了撤消重做功能来保证交互的流畅性.不过为一个应用实现撤销重做功能并不是一件容易的事情. Redux官方文档中 介绍了如何在 redux 应用中实现撤销重做功能.基于 redux 的撤销功能是一个自顶向下的方案:引入 redux-undo 之后所有的操作都变为了「可撤销的」,然后我们不断修改其配置使得撤销功能变得越来越好用(这也是 r
-
在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解
WebRTC,即Web Real-Time Communication,web实时通信技术.简单地说就是在web浏览器里面引入实时通信,包括音视频通话等. 在疫情期间哪里也去不了,在家没事就研究webrtc视频直播技术,网上找了些教程最终都不太能顺利跑起来的,可能是文章写的比较老,使用的一些开源组件已经更新了,有些配置已经不太一样了,所以按照以前的步骤会有问题.折腾了一阵终于跑起来了,记录一下. 一个简单的聊天室html页面 这个页面使用simple-webrtc来实现webrtc的通讯,sim
-
Django中使用jquery的ajax进行数据交互的实例代码
jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo