zoukankan      html  css  js  c++  java
  • 【JS】进步一些的计时器写法

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>计时器</title>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
        <table border=1>
            <tr>
                <td width="100px"><button onclick="javascript:start();">start</button></td>
                <td width="100px"><button onclick="javascript:stop();">stop</button></td>
                <td width="100px"><span id="showtime"></span></td>
            </tr>
        </table>
    </body>
    </html>
    <script type="text/javascript">
    <!--
        function Timer(){
            var spanId;
            var handler;
            var startTime;
    
            this.setSpanId=function(id){
                spanId=id;
            }
    
            this.begin=function(t){
                startTime=t;
                handler=setInterval(this.showElapsed,500);
            }
    
            this.showElapsed=function(){
                var now=new Date();
    
                var diff=(now-startTime)/1000;
                var d=parseInt(diff/86400);
                var h=parseInt(diff/3600)-24*d;
                var m=parseInt((diff % 3600) / 60);
                var s=parseInt(diff % 60);
                var elapsed=d+"day "+h+"hour "+m+"minute "+s+"second";
    
                document.getElementById(spanId).innerText=elapsed;
            }
    
            this.end=function(){
                clearInterval(handler);
            }
        }
    
        var timer=new Timer();
        timer.setSpanId("showtime");
    
        function start(){
            timer.begin(new Date());
        }
    
        function stop(){
            timer.end();
        }
    //-->
    </script>

    END

  • 相关阅读:
    [leetcode]Remove Nth Node From End of List
    [leetcode]Palindrome Number
    [leetcode]Integer to Roman
    HDU 4709:Herding
    HDU 4708:Rotation Lock Puzzle
    HDU 4707:Pet
    HDU 4706:Children's Day
    SDUT 2411:Pixel density
    SDUT 2413:n a^o7 !
    SDUT 2409:The Best Seat in ACM Contest
  • 原文地址:https://www.cnblogs.com/heyang78/p/15725588.html
Copyright © 2011-2022 走看看