话不多说，直接上代码：

　　有需要直接拿走，

<html>

<head>

    <style>

        div{

            width:100%;

             text-align:center;

            font-size: 14px;

        }

    </style>

</head>

        <div id="go">

        </div>

<body>

    <script>

        function countTime(time,id) {

                var date = new Date();

                var now = date.getTime();

                var endDate = new Date(time);//设置截止时间

                var end = endDate.getTime();

                var leftTime = end - now; //时间差

                var d, h, m, s, ms;

                if(leftTime >= 0) {

                    d = Math.floor(leftTime / 1000 / 60 / 60 / 24);

                    h = Math.floor(leftTime / 1000 / 60 / 60 % 24);

                    m = Math.floor(leftTime / 1000 / 60 % 60);

                    s = Math.floor(leftTime / 1000 % 60);

                    ms = Math.floor(leftTime % 1000);

                    if(ms < 100) {

                        ms = "0" + ms;

                    }

                    if(s < 10) {

                        s = "0" + s;

                    }

                    if(m < 10) {

                        m = "0" + m;

                    }

                    if(h < 10) {

                        h = "0" + h;

                    }

                    //将倒计时赋值到div中

                document.getElementById(id).innerHTML = d + "天" + h + "时" + m + "分" + s + "秒"+  ms + "毫秒";

                } else {

                    console.log('已截止')

                    //将倒计时赋值到div中

                    document.getElementById(id).innerHTML = "已开抢"

                }

                //递归每秒调用countTime方法，显示动态时间效果

               return leftTime

            }

            //调用方式  需要传入  结束时间   和 倒计时内容所在的id名称

            var s = setInterval(function (){

                   var dates =  countTime("2019-7-2 10:32:00", "go");

                    if(dates<=0) {

                        clearInterval(s)

                    }

            },50)

    </script>

</body>

</html>

前端js倒计时（精确到毫秒）的更多相关文章

  1. jQuery setInterval倒计时精确到毫秒

    效果类似于:购物抢购倒计时-->在跳转N多个页面之后,倒计时间仍然正常显示. 思路: 结束时间是固定不变的(endTime),一直在改变的是当下的时间(curTime = new date()) ...

  2. clips 前端 js 倒计时 获取验证码的按钮

    <a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-def ...

  3. 活动倒计时代码（精确到毫秒）jquery插件

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

  4. PHP精确到毫秒秒杀倒计时实例

    精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 da ...

  5. js网页倒计时精确到秒级

    网页实时倒计时,精确到秒级,和天数倒计时原理一样. 一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样.js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来 ...

  6. JS对象 Date 日期对象 日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。 定义一个时间对象 : var Udate=new Date();Date()的首字母须大写

    Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首 ...

  7. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  8. 前端js文件合并三种方式

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...

  9. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

随机推荐

  1. WPF InkCanvas 毛笔效果

    原文:WPF InkCanvas 毛笔效果 1.先来看看InkCanvas的一般用法: <InkCanvas>     <InkCanvas.DefaultDrawingAttrib ...

  2. Full Stack developer and Fog Computing

    尊重开发人员的劳动成果.转载请注明From郝萌主 http://blog.csdn.net/haomengzhu/article/details/40453769 看到这两组词,你是什么感觉? 不知所 ...

  3. C/C++回调方式系列之一 函数指针和函数回调模式

    一.函数指针 1. 函数的定义 return_type function_name(parameter list) { function_body } return_type: 返回值,函数一定有返回 ...

  4. Node.js 中开源库探秘 object-assign | 全栈之路

    这篇内容呢,讲的是另一个技术栈 Node.js 系列,虽然和咱们这里的主题不是特别吻合,不过嘛,汲取多样性的养分是快速成长的好方法,也是现在流行的全栈工程师的必经之路. 由于这篇内容涉及的是 Node ...

  5. 2-16 mysql主从复制

    1. 部署MYSQL主从同步 <M-S> 环境:mysql版本一致,均为5.7.18 master xuegod4  ip  192.168.10.34   数据库密码 yourpassw ...

  6. EF CodeFirst的步骤

    1 创建各个实体类 2 创建一个空数据模型,然后删除掉,为了引入Entity Framework和System.Data.Entity 3 为实体类增加标注 4 为实体增加导航属性 5 在App.co ...

  7. jquery动态创建小广告

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 【WPF】MVVM模式的3种command

    原文:[WPF]MVVM模式的3种command 1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand 因为MVVM模式适合于WPF和SL, ...

  9. WPF Layout 系统概述——Arrange

    原文:WPF Layout 系统概述--Arrange Arrange过程概述 普通基类属性对Arrange过程的影响 我们知道Measure过程是在确定DesiredSize的大小,以便Arrang ...

  10. CSS，让100%的宽度，自动减10，让100%的高度，自动减10，可以加减乘除

    CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除 实例: .add{ width: calc(100% - 10px); height: calc(100% - 10p ...