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

本来想封装成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 metadata lock(三)

    前言 MDL锁主要用来保护Mysql内部对象的元数据,通过MDL机制保证DDL与DML以及SELECT查询操作的并发.MySQL Meta Lock(一)和MySQL Meta Lock(二)已经讲了 ...

  2. DateTime , DateTime2 ,DateTimeOffset 之间的小区别

    闲来无事列了个表比对一下这3兄弟之间还是有一点差距的╮(╯_╰)╭   DateTime DateTime2 DateTimeOffset 日期范围 1753-01-01到 9999-12-31 00 ...

  3. Mac上打开拷贝到移动硬盘里的文件提示“已经被osx使用不能打开”解决办法

    在终端里面粘贴xattr -d com.apple.FinderInfo(此处按一下空格),然后把文件拖进终端窗口,按一下回车就好了

  4. linux运维常用命令及知识

    1.查找当前目录下所有以.tar结尾的文件然后移动到指定目录: find . -name “*.tar” -exec mv {} ./backup/ ; 查找当前目录30天以前大于100M的LOG文件 ...

  5. WPF 程序Form自的控件自适应方式之一

    <Window x:Class="MapEditor2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/ ...

  6. ixgbe rx_missed_errors

    https://communities.intel.com/thread/54600?start=0&tstart=0 I am acquiring 800Mb/sec+ multicast ...

  7. linux下 ^M

    在Linux下使用vi来查看一些在Windows下创建的文本文件,有时会发现在行尾有一些“^M”.有几种方法可以处理. 注意:在Linux下,可以通过ctrl+v,ctrl+m,打出^M字符.而却,以 ...

  8. 【转】【收藏】LINQ学习心得分享--------（二）LINQ语法详解

    原地址:http://blog.csdn.net/xuemoyao/article/details/8053444   通过上一章节的学习,相信大家已经掌握了学习LINQ的前期的准备知识.在这一节里, ...

  9. hdu-5933----hdu-5943

    hdu-5933 思路: 贪心,首先要求总和是k的倍数,而又要求相邻,说明相邻的一块如果是sum/k的倍数,那么就地切割这样才能使操作数目最少; hdu-5934 思路: 强连通分量,可以找出强连通分 ...

  10. UESTC-第五届ACM趣味程序设计竞赛第四场(正式赛)--不完全解题报告

    比赛链接: http://acm.uestc.edu.cn/contest.php?cid=230 A.Police And The Thief ---UESTC 1913 简单博弈,先假设在警察先走 ...