计时器

2019-03-27  本文已影响0人  垃圾桶边的狗
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            // 全局保存我们的计时器id, sec_count 用来计时,my_start 用来控制计时器运行状态
            var timer_id = -1;
            var sec_count = 0;
            var my_start = 0;

            function start() {
                //如果开始计时了 返回 什么也不做了
                if(my_start == 1) {
                    return;
                }
                //                  var sec_count = 0;
                //如果没开始 就修改计时器的运行状态
                my_start = 1;
                //创建计时器 计时
                timer_id = setInterval(function() {
                    //计数器加加
                    sec_count++;
                    //计算时分秒
                    var sec = sec_count % 60;
                    var minute = Math.floor(sec_count % 60 / 60);
                    var hour = Math.floor(sec_count / 3600);
                    //拿元素
                    var sec_tag = document.getElementById("second");
                    var minute_tag = document.getElementById("minute");
                    var hour_tag = document.getElementById("hour");
                    //设置元素值
                    sec_tag.innerHTML = sec;
                    minute_tag.innerText = minute;
                    hour_tag.innerText = hour;
                }, 1000)
            }

            function pause() {
                //清空计时器
                clearInterval(timer_id);
                //重置我们的函数的运行状态
                my_start = 0;
            }
        </script>
    </head>

    <body>
        <span id="hour">00</span>时<span id="minute">00</span>分<span id="second">00</span>秒
        <button onclick="start()">计时</button>
        <button onclick="pause()">暂停</button>
    </body>

</html>
上一篇下一篇

猜你喜欢

热点阅读