话不多说，直接上代码：

　　有需要直接拿走，

<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. C#进程创建监控

    关于c#进程创建监控的文章大多都是“遍历一次进程用if去判断存在或否”这样的方法,我觉得体验不是很好.这几天写的一个软件正好需要实时监控进程创建的模块,在网上找到了很不错的方法,整理一下分享出来给大家 ...

  2. echarts学习（上）

    echarts 学习之路 学习思路 初识echarts 编写自己的echarts图表 根据需求编写工作中的echarts图表[进阶篇] github地址:https://github.com/liso ...

  3. WPF Label控件在数据绑定Content属性变化触发TargetUpdated事件简单实现类似TextChanged 事件效果

    原文:WPF Label控件在数据绑定Content属性变化触发TargetUpdated事件简单实现类似TextChanged 事件效果   本以为Label也有TextChanged 事件,但在使 ...

  4. WPF 四种尺寸单位

    原文:WPF 四种尺寸单位 像素 px 默认单位可以省略 厘米cm 英寸 in 点 pt 1in = 96px 1cm=96/2.42px 1pt=96/72px

  5. 你好，Oh My Zsh - 社区力量全新方式定义命令行 | 咖啡时间

    Oh My Zsh 是一款社区驱动的命令行工具,正如它的主页上说的,Oh My Zsh 是一种生活方式.它基于 zsh 命令行,提供了主题配置,插件机制,已经内置的便捷操作.给我们一种全新的方式使用命 ...

  6. ADT eclipse的几个快捷键

    智能内容感知 Alt+/ ,该快捷键可以方便的匹配我们使用的类信息,/ 在键盘上和?是同一个按键. ctrl+.及ctrl+1:下一个错误及快速修改 ctrl+.将光标移动至当前文件中的下一个报错处或 ...

  7. HALCON学习之算子大全

    1.1 Gaussian-Mixture-Models 1.add_sample_class_gmm 功能:把一个训练样本添加到一个高斯混合模型的训练数据上. 2.classify_class_gmm ...

  8. WPF 过滤集合

    <Window x:Class="ViewExam.MainWindow"        xmlns="http://schemas.microsoft.com/w ...

  9. vmware linux无法正常上网

    不知道自己怎么搞的整的vmware里面的fedora 12 不能正常上网,但是在宿主机上ping XXX,是正常的.当service network restart 的时候提示MAC有问题.网上百度了 ...

  10. Android项目实战（四十四）：Zxing二维码切换横屏扫描

    原文:Android项目实战(四十四):Zxing二维码切换横屏扫描 Demo链接 默认是竖屏扫描,但是当我们在清单文件中配置横屏显示的时候: <activity android:name=&q ...