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

本来想封装成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. mvn archetype:create和mvn archetype:generate

    create is deprecated in maven 3.0.5 and beyond,在maven3.0.5以上版本舍弃了create,使用generate生成项目 before:mvn ar ...

  2. 多年前写的文本框扩展控件(有ValueChanging事件等)，已放github

    本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 阅读目录 介绍 起因 代码 使用 GitHub ...

  3. 【hadoop】——window下elicpse连接hadoop集群基础超详细版

    1.Hadoop开发环境简介 1.1 Hadoop集群简介 Java版本:jdk-6u31-linux-i586.bin Linux系统:CentOS6.0 Hadoop版本:hadoop-1.0.0 ...

  4. tomcat常用配置

    一. 增加内存,防止JVM内存溢出 1. 以服务的方式启动时 进入"tomcat安装路径\bin"目录下,打开service.bat文件,找到"--JvmOptions ...

  5. WIN32 API编程之 tap顺序

    用CreateWindow 函数创建的控件,如果想使用tap键切换,最简单的做法是:主窗口有WS_EX_CONTROLPARENT扩展属性,控件有WS_TAPSTOP属性. 然后最重要的是,在处理消息 ...

  6. Mysql 如何实现列值的合并

    Mysql 如何实现列值的合并 SELECT  GROUP_CONCAT(name SEPARATOR ' ') AS name FROM A

  7. maven项目下jsp文件中el表达式失效问题

    本来是为了写个springmvc的小demo,雏形搭建起来后想起来做成maven的好了,就重新建的maven项目,坑就从这里开始了... maven创建web项目默认使用的是web 2.3版本,web ...

  8. ZBrush中怎样对遮罩进行反选

    通过对ZBrush的学习,我们知道了如何手动创建遮罩,手动创建遮罩相对来说是最简单有效的方法,在某些特定的使用场合会起到事半功倍的效果.创建遮罩我们可以结合Ctrl键在物体保持编辑的状态下来执行,您可 ...

  9. 创建MyOffice项目

    创建查看评分窗体(FrmLOOK),添加定义成员数组,将员工数据绑定到FrmLOOK窗体的ListView控件上 public ListViewItem lv; private void Form1_ ...

  10. Codeforces 549C. The Game Of Parity[博弈论]

    C. The Game Of Parity time limit per test 1 second memory limit per test 256 megabytes input standar ...