js 倒计时毫秒级别显示

<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>

 

posted @ 2019-10-08 09:35  两面一汤  阅读(755)  评论(0编辑  收藏  举报