看了网上的其他的例子，觉得写的都有点复杂，不好理解，于是自己动手写了个。

本来想封装成jquery插件，但是觉得因为功能很简单，没有必要做成jquery插件，引用的时候不需要引入jqery库，这里直接用的原生js的方法。

TimeDown.js

/*

时间倒计时插件

TimeDown.js

*/

function TimeDown(id, endDateStr) {

    //结束时间

    var endDate = new Date(endDateStr);

    //当前时间

    var nowDate = new Date();

    //相差的总秒数

    var totalSeconds = parseInt((endDate - nowDate) / 1000);

    //天数

    var days = Math.floor(totalSeconds / (60 * 60 * 24));

    //取模（余数）

    var modulo = totalSeconds % (60 * 60 * 24);

    //小时数

    var hours = Math.floor(modulo / (60 * 60));

    modulo = modulo % (60 * 60);

    //分钟

    var minutes = Math.floor(modulo / 60);

    //秒

    var seconds = modulo % 60;

    //输出到页面

    document.getElementById(id).innerHTML = "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";

    //延迟一秒执行自己

    setTimeout(function () {

        TimeDown(id, endDateStr);

    }, 1000)

}

Html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>时间倒计时</title>

    <script src="TimeDown.js"></script>

</head>

<body>

    <form id="form1" runat="server">

        <div id="show">

        </div>

        <script type="text/javascript">

            TimeDown("show", "2013-11-25 8:00:45");

        </script>

    </form>

</body>

</html>

显示效果：

还剩:2天19小时29分钟5秒

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

  1. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  2. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

  3. 根据后端传的时间前端js进行倒计时

    一.故事背景: 1. 今天公司有个项目需求 2. 在前端页面实现一个倒计时功能 3. 初步设想:后端根据需求规定一个未来的时间,前端根据当前时间进行计算 4. 然后将时间格式化,时分秒的格式 5. 时 ...

  4. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  5. 一个简单的js实现倒计时函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS实现倒计时(天数,时,分,秒)

    <!DOCTYPE html> <html> <head>   <meta charset="utf-8" >   <titl ...

  7. 使用html+css+js实现倒计时，开启你痛苦的倒计时吧

    使用html+css+js实现倒计时,开启你痛苦的倒计时吧 效果图: 这是我痛苦的倒计时,呜呜呜 好啦,再痛苦还是要分享代码,代码如下,复制即可使用: <!DOCTYPE html> &l ...

  8. 用JS实现倒计时(日期字符串作为参数)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. JS实现倒计时效果，并退出系统

    背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...

随机推荐

  1. 烂泥：高负载均衡学习haproxy之TCP应用

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 在前几篇文章中,我们介绍了haproxy的配置参数,而且配置例子都是http协议(7层应用)的. 这篇文章,开始介绍haproxy的4层TCP应 ...

  2. nginx参数说明

    一.nginx的核心配置: >>> 正常运行的必备配置: 1. user username [groupname]; #指定运行worker子进程的用户或组 2. pid /path ...

  3. linux下如何打包压缩？解包解压？.tar文件.gz文件

    ===文件打包.压缩 ==打包 tar [root@521478.com]# tar -cvf etc1.tar /etc //c创建 v详细 f打包后文件名 [root@521478.com]# t ...

  4. 六、Android学习第五天——Handler的使用（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 六.Android学习第五天——Handler的使用 注意:有很多功能是不 ...

  5. 移动windows live writer文章的保存路径

    windows live writer强制安装在C盘,文章也是强制保存在我的文档中.那么我们想办法来改变保存的路径,防止重装系统的时候忘记保存C盘的东西. 网上找到的参考:http://www.dit ...

  6. openfire+asmack搭建的安卓即时通讯（七） 15.5.27

    本地化之章! 往期传送门: 1.http://www.cnblogs.com/lfk-dsk/p/4398943.html 2.http://www.cnblogs.com/lfk-dsk/p/441 ...

  7. 【2016-10-11】【坚持学习】【Day2】【代理模式】

    今天学习了代理模式. 定义 官方: 代理模式:给某一个对象提供一个代理或占位符,并由代理对象来控制对原对象的访问. Proxy Pattern: Provide a surrogate or plac ...

  8. C#迭代重载等

    迭代器 迭代器是作为一个容器,将要遍历的数据放入,通过统一的接口返回相同类型的值 迭代器代码使用 yield return 语句依次返回每个元素.yield break 将终止迭代 类中实现多个迭代器 ...

  9. 学习图像算法阶段性总结 (附一键修图Demo) 2016.04.19更新demo

    今天特别感慨,自己从决定研究图像处理,势必要做出一键修图算法. 经历了,三个多月的书籍积累,三个多月的算法调整以及优化. 人是一种奇怪的动物,当你做不到的时候,你以为做到了,自己会感觉很爽,很有成就感 ...

  10. Json数据的学习

    JSON 教程 <body><h2>JSON Object Creation in JavaScript</h2> <p>Name: <span ...