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

本来想封装成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. MySQL online ddl原理

    背景 dba的日常工作肯定有一项是ddl变更,ddl变更会锁表,这个可以说是dba心中永远的痛,特别是执行ddl变更,导致库上大量线程处于“Waiting for meta data lock”状态的 ...

  2. 十五天精通WCF——第十一天 如何对wcf进行全程监控

    说点题外话,我们在玩asp.net的时候,都知道有一个叼毛玩意叫做“生命周期”,我们可以用httpmodule在先于页面的page_load中 做一些拦截,这样做的好处有很多,比如记录日志,参数过滤, ...

  3. java JedisUtils工具类

    package com.sh.xrsite.common.utils; import java.util.List; import java.util.Map; import java.util.Se ...

  4. js和jquery页面初始化加载函数的方法及先后顺序

    运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...

  5. iOS Build Active Architecture Only 属性的理解（及 not found for architecture i386 的解决方案）

    最近做项目过程遇到一个问题: 涉及到这个属性:Build Active Architecture Only Yes .No的区别: 设置为yes,是只编译当前的architecture版本,是为了编译 ...

  6. Python字符串的编码与解码(encode与decode)

    首先要搞清楚,字符串在Python内部的表示是unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符串解码(decode)成unicode,再从unico ...

  7. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...

  8. [转]教你一招 - 如何给nopcommerce增加新闻类别模块

    本文转自:http://www.nopchina.net/post/nopchina-teach-newscategory.html nopcommerce的新闻模块一直都没有新闻类别,但是很多情况下 ...

  9. MMORPG大型游戏设计与开发（客户端架构 part7 of vegine）

    我在讲述某个东西的时候总喜欢从简单的入手,然后从互相关联的地方联合讲解,因为时间关系所以没能讲的十分详细,这点引以为憾,希望得到大家的谅解.这一节讲述的是微引擎(vengine)比较简单的一个模块,那 ...

  10. 【HTML5】标记文字

    1.用基本的文字元素标记内容 先看显示效果: 对应HTML代码: <!DOCTYPE html> <html lang="en"> <head> ...