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

  • 相关阅读:
    vue学习记录(四)---router的运用
    node.js 框架express关于报错页面的配置
    node.js 的热更新
    yii2 Menu组件的使用
    node.js 框架express有关于router的运用
    node.js 的页面渲染方法ejs
    什么是mybatis
    如何清除maven中下载失败的包
    hibernate 执行步骤
    什么是ORM
  • 原文地址:https://www.cnblogs.com/heyang78/p/15725588.html
Copyright © 2011-2022 走看看