<!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>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 400px;
            background: skyblue;
            margin: 100px auto;
            text-align: center;
        }
        
        #count {
            width: 200px;
            height: 150px;
            line-height: 150px;
            margin: auto;
            font-size: 40px;
        }
        
        #div1 input {
            width: 150px;
            height: 40px;
            background: orange;
            font-size: 25px;
            margin-top: 20px
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="count">
            <span id="id_H">00</span>
            <span id="id_M">00</span>
            <span id="id_S">00</span>
        </div>
        <input id="start" type="button" value="开始">
        <input id="pause" type="button" value="暂停">
        <input id="stop" type="button" value="停止">
    </div>
    <script>
        //可以将查找标签节点的操作进行简化  var btn = getElementById('btn')
        function $(id) {
            return document.getElementById(id)
        }
        window.onload = function() {
            //点击开始建 开始计数
            var count = 0
            var timer = null //timer变量记录定时器setInterval的返回值
            $("start").onclick = function() {
                timer = setInterval(function() {
                    count++;
                    console.log(count)
                        // 需要改变页面上时分秒的值
                    console.log($("id_S"))
                    $("id_S").innerHTML = showNum(count % 60)
                    $("id_M").innerHTML = showNum(parseInt(count / 60) % 60)
                    $("id_H").innerHTML = showNum(parseInt(count / 60 / 60))
                }, 1000)
            }
            $("pause").onclick = function() {
                    //取消定时器
                    clearInterval(timer)
                }
                //停止记数  数据清零  页面展示数据清零
            $("stop").onclick = function() {
                //取消定时器
                $("pause").onclick()
                    // clearInterval(timer)
                    //数据清零  总秒数清零
                count = 0
                    //页面展示数据清零
                $("id_S").innerHTML = "00"
                $("id_M").innerHTML = "00"
                $("id_H").innerHTML = "00"
            }

            //封装一个处理单位数字的函数
            function showNum(num) {
                if (num < 10) {
                    return '0' + num
                }
                return num
            }
        }
    </script>
</body>
</html>

 

Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

华为云数据仓库专业级开发者认证重磅发布

avatar 华为开发者空间
cover

KubeEdge 新版本5大特性解读：更完备的节点设备能力，全新的Dashboard体验

avatar 华为开发者空间
cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间