其实主要是借鉴了了这篇文的写法（http://tuzwu.iteye.com/blog/819081），俺稍作了修改，以便更适合我的需要：

实现功能：调用一个函数，传入html元素的id，和一个截止时间（unix时间戳），在该html元素中打印出到当前到截止时间为止的倒计时,精确到毫秒；

效果图如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title></title>

        <style>

            div{

                width: 100%;

                height: 50px;

                margin-bottom: 5px;

                background: yellowgreen;

            }

        </style>

    </head>

    <body>

        <h2>毫秒的倒计时</h2>

        <div id="timer1"></div>

        <div id="timer2"></div>

        <div id="timer3"></div>

        <div id="timer4"></div>

        <script>

            var addTimer = function(){

                var list = [],

                    interval;

                return function(id,timeStamp){

                    if(!interval){

                        interval = setInterval(go,1);

                    }

                    list.push({ele:document.getElementById(id),time:timeStamp});

                }

                function go() {

                    for (var i = 0; i < list.length; i++) {

                        list[i].ele.innerHTML = changeTimeStamp(list[i].time);

                        if (!list[i].time)

                            list.splice(i--, 1);

                    }

                }

                //传入unix时间戳，得到倒计时

                function changeTimeStamp(timeStamp){

                    var distancetime = new Date(timeStamp*1000).getTime() - new Date().getTime();

                    if(distancetime > 0){ 
　　　　　　　　　　　　　　//如果大于0.说明尚未到达截止时间

                        var ms = Math.floor(distancetime%1000);

                        var sec = Math.floor(distancetime/1000%60);

                        var min = Math.floor(distancetime/1000/60%60);

                        var hour =Math.floor(distancetime/1000/60/60%24);

                        if(ms<100){

                            ms = "0"+ ms;

                        }

                        if(sec<10){

                            sec = "0"+ sec;

                        }

                        if(min<10){

                            min = "0"+ min;

                        }

                        if(hour<10){

                            hour = "0"+ hour;

                        }

                        return hour + ":" +min + ":" +sec + ":" +ms;

                    }else{
　　　　　　　　　　　　　　//若否，就是已经到截止时间了

                        return "已截止！"

                    }

                }

            }();

            addTimer("timer1",1451923200);//1月5日00点，unix时间戳自己去百度一下，就有的

            addTimer("timer2",1451926800);//1月5日01点

            addTimer("timer3",1451930400);//1月5日02点

            addTimer("timer4",1452020400);//1月6日03点

        </script>

    </body>

</html>

-------------------------------------------------------------

如何使用这个函数？

addTimer("#id",时间戳int);

PS:

其实这个函数有一个小小的问题：就是并不会显示截止天数；因为老板表示我们的倒计时时间最多也就几个小时,所以在判断倒计时的小时和天数上，我也就懒得写那么多了。所以如果传入的时间戳距今超过了1天。那么你会看到如此结果：02:11:32:874~~只剩2个小时了！明显不对是不是？

　　so，有2个方案这里：

　　方法1：把var hour =Math.floor(distancetime/1000/60/60%24);改成var hour =Math.floor(distancetime/1000/60/60);

　　　　如果截止时间距今超出一天了，小时位置会显示大于24的数字；比如：36:45:22:888

　　方法2：你自己再写一个计算天数的变量；

（其实我觉得毫秒倒计时完全没有必要，精确到秒就够了嘛~毫秒这么快，简直看得我眼瞎！）

js 多个倒计时，毫秒倒计时的更多相关文章

  1. JS倒计时-毫秒

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  2. js 倒计时毫秒级别显示

    <html> <head> <style> div{ width:100%; text-align:center; font-size: 14px; } </ ...

  3. js 和 java 将时间倒计时显示

    需求:用户购买产品,创建了一个订单,但是还么有支付,此时给用户三十分钟剩余支付时间,前台页面做倒计时功能,时间到达时,更改订单状态 ,输出的格式是:29:23 java 实现 package com. ...

  4. js写的5秒钟倒计时跳转

    使用js实现几秒以后倒计时跳转,这个在某些特殊情况下还是比较实用的,下面为大家介绍下具体的实现步骤,感兴趣的朋友不要错过  代码如下: <html>  <head>  < ...

  5. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  6. 毫秒倒计时小Demo

    Demo截图: Demo:Demo 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. js 发送短信验证码倒计时

    html <input type="button" id="btn" value="免费获取验证码" onclick="se ...

  8. [JS] 自己弄得个倒计时

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js学习笔记之日期倒计时(天，时，分，秒）

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

随机推荐

  1. JMeter的安装和目录解析

    Ubuntu系统中jmeter的安装和目录解析 作为一个Linux新手,在使用jdk时,或许会安装配置多次仍然导致无法使用情况(如无法登录系统等),请按如下步骤一步一步安装并配置 相关软件下载地址 J ...

  2. 【MSDN_C#】C#版本介绍

    C# 1,Visual Studio .NET 2002 首次发布 C# 1.1,Visual Studio .NET 2003 #line 杂注和 xml 文档注释 C# 2,Visual Stud ...

  3. 关于Task的认识

    首先来说说 Task.Factory.StartNew这种方式来创建Task,这里的WaitAll()指的是等待所有Task执行完成,并且里面的Task参数(t1,t2)是异步的,先以匿名委托方式 s ...

  4. 照着官网来安装openstack pike之nova安装

    nova组件安装分为控制节点和计算节点,还是先从控制节点安装 1.前提条件,数据库为nova创建库和账户密码来连接数据库 # mysql -u root -p MariaDB [(none)]> ...

  5. windows server 2012泛域名解析配置

    应测试要求,要将一个泛域名(*.office.baibai.com)解析到一个内网的IP(10.1.100.240)地址上(使用域控DNS解析)...以下为我的配置过程,做的时候将图顺便接了下来: 1 ...

  6. linux版本安装pip

    因为一直在windows开发python程序,今天把python程序打成docker image镜像的时候,发现pip无法使用,并且使用yum 也无法安装,查找资料发现下面方法可用 1.python ...

  7. 20145216史婧瑶《Java程序设计》第8周学习总结

    20145216 <Java程序设计>第8周学习总结 教材学习内容总结 第十五章 通用API 15.1 日志 java.util.logging 包提供了日志功能相关类与接口,不必额外配置 ...

  8. RocEDU.阅读.写作《苏菲的世界》书摘（三）

    根据柏拉图的说法,人是一种具有双重性质的生物.我们的身体是"流动"的,与感官的世界不可分割,并且其命运与世界上其他每一件事物(如肥皂泡)都相同.我们所有的感官都是以身体为基础,因此 ...

  9. 20145331 《Java程序设计》第7周学习总结

    20145331 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 1.Lambda定义:一个不用被绑定到一个标识符上,并且可能被调用的函数. 2.在只有Lam ...

  10. Centos下ftp协议连接远程ftp server主机

    环境说明 [root@Check3 ~]# cat /etc/redhat-release CentOS release 6.9 (Final) [root@Check3 ~]# uname -a L ...