计时器动画

计时器动画

视频效果

计时器

css样式

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        .whole {
            width: 300px;
            height: 500px;
            background-color: aqua;
            margin: auto;
            padding-top: 1px;
        }

        #top {
            width: 200px;
            height: 50px;
            margin: 20px auto;
            text-align: center;
            font-size: 30px;
        }

        #bottom {
            width: 200px;
            height: 400px;
            list-style: none;
            margin: auto;
        }

        button {
            width: 200px;
            height: 50px;
            margin: 50px 0px 0px 50px;
            line-height: 50px;
            background-color: chocolate;
        }
    </style>

html部分

<div class="whole">
        <div id="top">
            <span id="span_1">00</span>
            <span id="span_2">00</span>
            <span id="span_3">00</span>
        </div>
        <button id="start">开始</button>
        <button id="stop">暂停</button>
        <button id="over">结束</button>
    </div>

js部分

//函数封装名字
function name(id){
 return document.getElementById(id)
}
//补零函数
 function zero(time) {
        return time >= 10 ? time : "0" + time
    }
//开始按钮
 name("start").onclick = function () {
        this.disabled = true
        name("stop").disabled = false
        name("over").disabled = false

        time = setInterval(function () {
            num++
            name("span_3").innerHTML = zero(parseInt(num % 60)) //zero是补零函数名
            name("span_2").innerHTML = zero(parseInt(num / 60 % 60))
            name("span_1").innerHTML = zero(parseInt(num / 60 / 60 % 24))

        }, 100)
    }
    // 停止按钮
  name("stop").onclick = function () {
        this.disabled = true
        name("start").disabled = false
        clearInterval(time)
    }
    // 清除按钮
     name("over").onclick = function () {
        this.disabled = true
        name("start").disabled = false
        clearInterval(time)
        num = 0
        name("span_3").innerHTML = zero(parseInt(num % 60))
        name("span_2").innerHTML = zero(parseInt(num / 60 % 60))
        name("span_1").innerHTML = zero(parseInt(num / 60 / 60 % 24))
    }