<!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实现的美观的倒计时实例代码的更多相关文章

  1. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  2. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  3. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  4. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  5. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  6. jQuery Ajax方法调用 Asp.Net WebService、WebMethod 的详细实例代码

    将以下html存为ws.aspx <%@ Page Language="C#" AutoEventWireup="true" %> <scri ...

  7. 后台接受ajax传递值的实例代码

    后台接受ajax传递值的实例代码: 使用ajax可以实现无刷新数据交互,下面是一段后台代码接收ajax传递值的实例代码供需要的朋友参考,希望能够带来帮助. ajax代码如下: $(function ( ...

  8. jQuery下拉友情链接美化效果代码分享

    这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...

  9. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

随机推荐

  1. lua 初接触 --- The first time use Lua for programing

    The first time use Lua for programing Wang Xiao 1. 关于 lua 的变量类型:  lua 变量的定义与matlab有点不同: local d , f ...

  2. ORA-01089 数据库无法正常关闭

    今天在做SOA几个数据库的重启操作,其中一个数据库在关闭过程中一直处于HANG住状态,十几分钟没有任何进展,具体操作过程如下: 一:当时的情景 SQL> shutdown immediate - ...

  3. min—width的使用

    在网页中,如果一个元素没有设置最小宽度(min-width),这时当浏览器缩小到一定程度时,元素中的布局可能会发生变化.如果想要保持布局不变,可以给该元素(如div)设置最小宽度属性 .box{ ba ...

  4. [C# 基础知识梳理系列]专题六:泛型基础篇——为什么引入泛型

    引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...

  5. 使用PHP+ajax打造聊天室应用

    方法1.  comet http://www.xiumu.org/technology/the-php-notes-comet-long-connection-instance.shtml  这篇文章 ...

  6. linux命令单次或组合样例

    ###解压命令.tar.gz    格式解压为    tar   -zxvf   xx.tar.gz.tar.bz2   格式解压为     tar   -jxvf    xx.tar.bz2 ### ...

  7. web前端-面试经验总结

    这几次面试主要是冲着百度去的 面试1的主要问题: 笔试: 1.解释css盒子模型 2.常用选择器,以及优先级 3.B如何继承A 4.写一个闭包实例,有什么优点缺点 5.html5的心特性有哪些 6. ...

  8. 图解SQL的各种连接join[转]

    对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...

  9. 【shiro】org.apache.shiro.authc.IncorrectCredentialsException: Submitted credentials for token

    org.apache.shiro.authc.IncorrectCredentialsException: Submitted credentials for token [org.apache.sh ...

  10. SQL 查询本月无数据用上个月的数据问题

    SQL 查询本月无数据用上个月的数据 前言 因为标题有长度限制,先简要说明一下应用场景.比如我们要查一段时间范围内(2013-08-01至2013-12-31)每个月每个运营商的用户总量,每个运营商用 ...