代码:

js:

function countDown(time, id) {  //time的格式yyyy/MM/dd hh:mm:ss
    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(), //月份是实际月份-1
    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 && $(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);
}

html:

  <p id="colockbox">
              <span class="day" id="day">00</span>

     <span class="hour">00</span>:

<span  class="minute">24</span>:

     <span class="second">24</span>
      </p>

jquery时间倒计时的更多相关文章

  1. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  2. jQuery实现倒计时效果-杨秀徐

    本实例效果:剩余368天22小时39分57秒结束 代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时 ...

  3. jquery.countdown 倒计时插件的学习

    1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...

  4. jquery实现倒计时

    <html> <head> <meta charset="utf-8"/> <title>jquery实现倒计时</title ...

  5. jQuery控制倒计时

    1.1 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...

  6. jquery时间轴幻灯展示源代码

    查看效果:http://hovertree.com/texiao/jquery/75/ 源代码下载:http://hovertree.com/h/bjaf/8jlpc2wu.htm 效果图如下: 代码 ...

  7. jQuery时间格式插件-moment.js的使用

    jQuery时间格式插件-moment.js的使用 moment.js插件的使用,使用之前在页面引入对应的js文件: 详细的操作可见moment中文官网:http://momentjs.cn/ 日期格 ...

  8. jQuery时间轴插件timeline.js

    http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...

  9. 发展简史jQuery时间轴特效

    发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wr ...

随机推荐

  1. Swift3.0基础语法学习<四>

    协议和扩展: // // ViewController4.swift // SwiftBasicDemo // // Created by 思 彭 on 16/11/16. // Copyright ...

  2. gcc编译时指定链接库的查找目录

    gcc编译时,如果需要链接的库的目录不在标准目录,则需要通过将保护库的目录/aa/bb/cc通过-L/aa/bb/cc 添加到搜索路径中,如: gcc -o xmltest xml_test.cpp ...

  3. 在将 varchar 值 '1,2,3,4,5,6,7,8' 转换成数据类型 int 时失败。

    alter PROCEDURE PrTradingDelete ) AS BEGIN WHERE id in(@id) END GO 执行上面这个存储过程会异常.提示 :在将 varchar 值 '1 ...

  4. 利用Lambda获取属性名称

    感谢下面这篇博文给我的思路: http://www.cnblogs.com/daimage/archive/2012/04/10/2440186.html 上面文章的博主给出的代码是可用的,但是调用方 ...

  5. jzoj[1438]NOIP2013火柴排队

    读题: 相邻两个火柴可以交换?两个火柴序列?嗅到了归并排序的味道. 读完题目之后,我们可以知道,如果想要交换次数最少,可以先固定一个序列不变,比如说a序列不变,变b序列 样例是 4 2 3 1 4 3 ...

  6. python3中的zip

    在 python2 中zip可以将两个列表并入一个元组列表,如: a = [1,2,3,4] b = [5,6,7,8] c = zip(a,b) 结果:c [(1,5),(2,6),(3,7),(4 ...

  7. 使用事件等待句柄EventWaitHandler 实现生产者、消费者队列

    using System; using System.Threading; using System.Collections.Generic; class ProducerConsumerQueue ...

  8. u-boot 编译时间

    给定的格式FORMAT 控制着输出,解释序列如下: %%    一个文字的 %  %a    当前locale 的星期名缩写(例如: 日,代表星期日)  %A    当前locale 的星期名全称 ( ...

  9. 第六次课:springMVC与spring的集成

    spring在项目中起到了管理bean的作用,即可以通过配置,让系统自动创建所需的对象,通过一定的方式引用系统创建的对象,对象的创建和引用都是由spring自动完成的,用户不必参与,可以直接引用. 实 ...

  10. 对csv文件的操作

    统计行数 wc -l /home/hadoop/workspace/ChemicalFactory/input/device101.csv 输出前两行数据 head -n 2 /home/hadoop ...