【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

posted @   逆火狂飙  阅读(44)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
生当作人杰 死亦为鬼雄 至今思项羽 不肯过江东
点击右上角即可分享
微信分享提示