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

本来想封装成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. HTTPS那些事（二）SSL证书

    转自:http://www.guokr.com/post/116169/ 从第一部分HTTPS原理中, 我们可以了解到HTTPS核心的一个部分是数据传输之前的握手,握手过程中确定了数据加密的密码.在握 ...

  2. JQuery 世界时间

    根据表格的时间显示表格的时间,本机的时间,韩国的时间 <%@ Page Language="C#" AutoEventWireup ="true" Cod ...

  3. Tomcat 目录详解

     一.文字版本: bin: 该目录下存放的是二进制可执行文件,如果是安装版,那么这个目录下会有两个exe文件:tomcat6.exe.tomcat6w.exe,前者是在控制台下启动Tomcat,后者是 ...

  4. hadoop如何处理长时间运行不完成的map/reduce 任务?

    如果某一个任务在某个节点上长时间不完成,怎么手动干预来处理这种情况?董西成博客上找到的回答:hadoop中有三种特殊的任务,failed task,killed task和speculative ta ...

  5. [Top-Down Approach] Chatper 4 Notes

    4.2 Virtual Circuit and Datagram Networks VC Set up connection Exchange data Free the connection The ...

  6. 【2016-10-13】【坚持学习】【Day4】【virtual 虚函数】

    定义一个基类,有一个虚函数 定义三个子类,分别继承,重写,New,这个虚函数   abstract class Test { public virtual void Prinf() { Console ...

  7. 【HTML5】使用多媒体

    HTML5 支持直接在浏览器中播放音频和视频文件,不需要使用Abode Flash这样的插件. 1. 使用 video 元素 可以用video 元素在网页里嵌入视频内容. 其基本用法如下: <! ...

  8. 译：Google的大规模集群管理工具Borg（一）------ 用户视角的Borg特性

    概述 Google的Borg系统是一个集群管理工具,在它上面运行着成千上万的job,这些job来自许许多多不同的应用,并且跨越多个集群,而每个集群又由大量的机器构成. Borg通过组合准入控制,高效的 ...

  9. 第10章 同步设备I/O和异步设备I/O（2）_同步IO和异步IO基础

    10.3 执行同步设备I/O (1)对设备读写操作的函数 ①ReadFile/WriteFile函数 参数 描述 hFile 文件句柄 pvBuffer 指向要接收文件数据的缓冲区或把缓冲区数据写入设 ...

  10. 技术专题-PHP代码审计

    作者:坏蛋链接:https://zhuanlan.zhihu.com/p/24472674来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 一.前言 php代码审计如字面 ...