<html>

<head>

    <style>

        div{

            width:100%;

             text-align:center;

            font-size: 14px;

        }

    </style>

</head>

        <div id="go">

        </div>

<body>

    <script>

        var SECOND = 1000;

        var MINUTE = 60 * SECOND;

        var HOUR = 60 * MINUTE;

        var DAY = 24 * HOUR;

        var TIME = Date.now() + 100000;

        var lastTIME = Date.now();

        var prev = Date.now();

        function fallback(fn) {

            var curr = Date.now();

            var ms = Math.max(0, 16 - (curr - prev));

            var id = setTimeout(fn, ms);

            prev = curr + ms;

            return id;

        }

        var root = window;

        var iRaf = root.requestAnimationFrame || fallback;

        function raf(fn) {

           return iRaf.call(root, fn);

        } 

        function parseTimeData(time) {

            var days = Math.floor(time / DAY);

            var hours = Math.floor(time % DAY / HOUR);

            var minutes = Math.floor(time % HOUR / MINUTE);

            var seconds = Math.floor(time % MINUTE / SECOND);

            var milliseconds = Math.floor(time % SECOND);

            return {

                days,

                hours,

                minutes,

                seconds,

                milliseconds

            };

        }

        function MAXTime(){

            return Math.max(Date.now() - lastTIME,0)

        }

        function Calculation(){

            (0,raf)(function(){

                if(MAXTime()){

                    document.getElementById('go').innerHTML = JSON.stringify(parseTimeData(TIME - lastTIME))

                }

                lastTIME = Number(Date.now())

                Calculation()

            })

        }

        Calculation()

    </script>

</body>

</html>

js 倒计时毫秒级别显示的更多相关文章

  1. JS倒计时-毫秒

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

  2. js倒计时显示

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

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

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

  4. js实现文字逐个显示

    先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...

  5. js倒计时 手机休眠时 时间不进行减少

    http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...

  6. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js 倒计时（可自定义时间）

    <html> <head> <title>js 倒计时</title> </head> <body> <div> & ...

  8. js获取当前时间显示在页面上

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

  9. Js倒计时程序

    Js倒计时程序 点击下载

随机推荐

  1. apache的目录浏览功能 列出的文件名不完整，能否修改设置

    在httpd.conf 和 httpd-vhosts.conf中的  <Directory ????> </Directory>如下设置,重启apache即可: <Dir ...

  2. STL之__ type_traits

    __type_traits:双底线是说明这是SGI STL内部使用的东西,不在STL标准范围之内.iterator_traits负责萃取迭代器(iterator)的特性.而__type_traits则 ...

  3. MySQL基本命令脚本

    一.基本命令 1.启动服务 说明:以管理员身份运行cmd 格式:net start 服务名称 示例:net start mysql57 2.停止服务 说明:以管理员身份运行cmd 格式:net sto ...

  4. Java 基础 - final vs static

    总结 共同点,都可以修饰类,方法,属性.而不同点: static 含义:表示静态或全局,被修饰的属性和方法属于类,可以用类名.静态属性 / 方法名 访问 static 方法:只能被static方法覆盖 ...

  5. XAMPP的安装及使用教程

    https://blog.csdn.net/qq_36595013/article/details/80373597#3%E9%85%8D%E7%BD%AEapache

  6. C# .net async await 学习

    async/await简单介绍 在处理比较耗时的操作(如图片处理.数据压缩.http请求等)传统的异步方法是直接使用Thread或者Task进行操作,在复杂的应用编写中可能会出现回调的问题,因此C#目 ...

  7. 关于python3字符串中引号格式的看法，‘’，“”

    关于字符串中引号格式的看法 在python3中,字符串统一使用: ' ' 或  " "     来表示,两者没有什么区别. 但是在使用的过程中,可以注意一下使用的方式,可以提高编程 ...

  8. C语言进阶学习第二章

    本章重点记录指针的各种概念: 1.地址与内容 2.非法的赋值 3.NULL指针:NULL指针作为一个特殊的指针变量,表示不指向任何东西,在对指针进行解引用操作之前,首先必须 确保它并非NULL指针. ...

  9. MDK 添加芯片支持 以STM32F103ZE为例

    问题说明: 新建mdk工程时第一步是选芯片(以STM32F103ZE为例),但是芯片没有的话需要自己手动添加,如图: 解决方法: 下载KEIL MDK5以后是没有安装device的,如果此时创建工程会 ...

  10. Celery - 异步任务 , 定时任务 , 周期任务

    1.什么是Celery?Celery 是芹菜Celery 是基于Python实现的模块, 用于执行异步定时周期任务的其结构的组成是由    1.用户任务 app    2.管道 broker 用于存储 ...