原生js计时器

最新推荐文章于 2022-10-24 20:17:13 发布

weixin_33859504

最新推荐文章于 2022-10-24 20:17:13 发布

阅读量208

点赞数

原文链接：http://www.cnblogs.com/gitByLegend/p/10541360.html

版权

闲来无事,写一个简单的计时器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Elias:计时器</title>
    <style>
        div.box{
            width: 300px;
            height: 100px;
            margin: 100px auto;
            line-height: 50px;
            text-align: center;
            border: 1px solid red;
        }
        div.time{
            width: 300px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="time">
            00:00:00
        </div>
        <form>
            <button type="button" id="reset">重新开始</button>
            <button type="button" id="stop">暂停</button>
            <button type="button" id="continue">继续</button>
        </form>
    </div>
    <script>
        var oTime = document.querySelector('.time');
        var oReset = document.getElementById('reset');
        var oStop = document.querySelector('#stop');
        var oContinue = document.querySelector('#continue');

        function format(obj) {//简单封装一个格式化时间的函数
            if (obj < 10) {
                return "0" + obj;
            } else {
                return obj;
            }
        }
        var ss,s,ms,hs,timer;
        oReset.onclick = function () {
            ss = s = ms = hs = 0;
            timeRun();
            oStop.onclick = function () {
                clearInterval(timer);
            }
            oContinue.onclick = function () {
                timeRun();
            }
        }

        function timeRun() {
            clearInterval(timer);
            timer = setInterval(function () {
                ss++;
                ms = format(Math.floor(ss / 60));
                hs = format(Math.floor(ss / 3600));
                s = format(ss % 60);
                oTime.innerHTML = hs + ":" + ms + ":" + s;
            }, 1000)
        }
    </script>
</body>

</html>

转载于:https://www.cnblogs.com/gitByLegend/p/10541360.html

weixin_33859504

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js计时器

闲来无事,写一个简单的计时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫