话不多说，直接上代码：

　　有需要直接拿走，

<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. JDBC数据源DBCP源代码情景分析

    在之前的一篇博文从JDBC到commons-dbutils 中,我曾经写到,对于获取数据库连接,有一个解决方案,那就是数据源.业界用到的比较普遍的开源数据源解决方案有很多,DBCP是其中一种,今天,我 ...

  2. ArcGIS API for Silverlight 学习笔记

    这里主要讲解展示不同的服务地图 先看一个实例: 新建一个Silverlight项目,在MainPage.xaml文件中,引入 ESRI.ArcGIS.Client 命名空间和 ESRI.ArcGIS. ...

  3. spring boot 集成mybatis报错Missing artifact

    1. pom文件中的oracle依赖提示Missing artifact,需要手动下载并导入maven参考 oracle依赖下载地址 (ojdbc6.jar) cd到下载的ojdbc6.jar所在路径 ...

  4. sql 1=1

    大多数时候是为了sql拼写方便而加的条件从执行任务来看,不影响性能  

  5. NoSQL Manager for Cassandra 3.2.0.1 带Key

    NoSQL Manager for Cassandra 3.2.0.1 是一个Windows平台下Cassandra 数据库的高级管理工具.请低调使用. NoSQLManagerforCassandr ...

  6. 待修 Bug

    # 乱码 ## 描述 环境:Tomcat 8 + Spring 4 + Spring Security. 问题描述: 在类 AbstractAnnotationConfigDispatcherServ ...

  7. HALCON 语句的分类

    绿色:注释 褐色:控制和开发算子 蓝色:图像获取和处理算子 浅蓝色:外部函数

  8. 【C#】WindowsAPICodePack-Shell使用教程

    原文:[C#]WindowsAPICodePack-Shell使用教程 1.首先在项目中添加WindowsAPICodePack的Nuget包.   点击安装即可. 2.获取<我的电脑>的 ...

  9. WPF控件TextBlock中文字自动换行

    原文:WPF控件TextBlock中文字自动换行 在很多的WPF项目中,往往为了追求界面的美观,需要控制控件中文字的换行显示,现对TextBlock控件换行的实现方式进行总结,希望大家多多拍砖!!! ...

  10. JS实时检测文本框内容长度

    通过js代码实时监测,文本框内容的变化以及长度,下图是一个实际使用场景. HTML部分: <input id="Text1" type="text" on ...