纯js代码的计时器

最新推荐文章于 2024-06-05 15:33:33 发布

原创最新推荐文章于 2024-06-05 15:33:33 发布 · 542 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML页面中的JavaScript计时器实现方法。该计时器能够实时更新显示的时间，并提供了开始与暂停功能。通过setTimeout和clearTimeout来控制计时器的运行与停止。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        //全局变量 前面的类型可以省略
        var t=0;
        var end;
        function start(){
            t=t+1000;
           var h= Math.floor(t/(1000*60*60));
            var m=Math.floor((t-h*60*60*100)/(1000*60));
            m=checkTime(m);
            var s=Math.floor((t-m*60*1000-h*60*60*1000)/1000);
            s=checkTime(s);
            document.getElementById("txt").innerHTML=h+":"+m+":"+s;
            end=setTimeout("start(t)",1000);
        }

        function checkTime(i)
        {
            if (i<10)
            {i="0" + i}
            return i
        }
        //暂停的方法
        function endf(){
           clearTimeout(end);

        }
    </script>
</head>
<body>
       <div align="center">
           <input type="button" value="开始" onclick="start()">
           <input type="button" value="暂停" onclick="endf()">
       </div>
       <br>
       <br>
       <div id="txt" align="center">

       </div>
</body>
</html>