用JavaScript写了个计时器

样式大概就这样吧~heihei

 <!-- 计时器 -->
    <style>
        button {
            height: 40px;
            width: 80px;
        }

        div {
            display: inline-block;
            height: 50px;
            width: 50px;
            background-color: rgb(41, 39, 39);
            color: #fff;
            font-size: 16px;
            line-height: 50px;
            text-align: center;
        }
    </style>
    <p>
    <div></div>
    <div></div>
    <div></div>
    </p>
    <button class="start">开始计时</button>
    <button class="stop">停止计时</button>
    <script>
        var start = document.querySelector('.start');
        var stop = document.querySelector('.stop');
        var div = document.querySelectorAll('div');
        var hours = 0;
        var minutes = 0;
        var seconds = 0;
        var s = 0;//总的秒数
        var timer = null;//null里存的类型是对象
        start.addEventListener('click', function () {
            clearInterval(timer);//在每次开启时先清除计时器 防止多次点击开启多个定时器
            timer = setInterval(function () {
                s++;
                hours = parseInt(s / 3600);
                hours = hours < 10 ? '0' + hours : hours;
                minutes = parseInt(s % 3600 / 60);
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = parseInt(s % 60);
                seconds = seconds < 10 ? '0' + seconds : seconds;
                div[0].innerHTML = hours;
                div[1].innerHTML = minutes;
                div[2].innerHTML = seconds;
            }, 1000)
        })
        stop.addEventListener('click', function () {
            clearInterval(timer);
        })
    </script>

 学习路上一点小记录，欢迎大家指正~