【JS】计时器的三次进化

1

1.

复制代码
<!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 count;

        this.setSpanId=function(id){
            spanId=id;
            count=0;
        }

        this.begin=function(){
            handler=setInterval(this.add,500);
        }

        this.add=function(){
            count++;
            document.getElementById(spanId).innerText=count+"";
        }

        this.end=function(){
            clearInterval(handler);
        }
    }

    var timer=new Timer();
    timer.setSpanId("showtime");

    function start(){
        timer.begin();
    }

    function stop(){
        timer.end();
    }
//-->
</script>
复制代码

2.

复制代码
<!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.setStartTime=function(t){
            startTime=t;
        }

        this.setSpanId=function(id){
            spanId=id;
        }

        this.begin=function(){
            handler=setInterval(this.add,500);
        }

        this.add=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");
    timer.setStartTime(new Date());

    function start(){
        timer.begin();
    }

    function stop(){
        timer.end();
    }
//-->
</script>

3

<!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>
posted @ 2021-12-23 22:54  不朽的飞翔  阅读(45)  评论(0)    收藏  举报