倒计时的实现之设置定时器与清除定时器

骑猪看日落 2022-12-22 15:23 248阅读 0赞

## 定时器的清除和设置： ##

先看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]

*核心思路如下：*

1.  获取到所有单位的时间，赋值到盒子的内容
2.  设定一个空对象setter 作全局变量（方便监听事件调用）

`结构代码如下：`

<div class="box">
            <button class="start">开始倒计时</button>
            <span class="days">99</span> 天
            <span class="hours">99</span> 时
            <span class="minutes">99</span> 分
            <span class="seconds">99</span> 秒
            <button class="stop">停止倒计时</button>
        </div>

`scirpt核心代码如下：`

`样式代码如下：`

* { 
                padding: 0;
                margin: 0;
            }
            .box { 
                width: 500px;
                height: 150px;
                line-height: 150px;
                margin: 200px auto;
                text-align: center;
                background-color: lightskyblue;
                border: 2px solid black;
                box-shadow: 10px 10px 10px 10px gainsboro;
            }
            .days { 
                display: inline-block;
                width: 50px;
                height: 50px;
                padding: 5px;
                margin: 1px;
                line-height: 50px;
                font-size: 30px;
                text-align: center;
                background-color: black;
                color: white;
            }
            .hours { 
                display: inline-block;
                width: 50px;
                height: 50px;
                padding: 5px;
                margin: 1px;
                line-height: 50px;
                font-size: 30px;
                text-align: center;
                background-color: black;
                color: white;
            }
            .minutes { 
                display: inline-block;
                width: 50px;
                height: 50px;
                padding: 5px;
                margin: 1px;
                line-height: 50px;
                font-size: 30px;
                text-align: center;
                background-color: black;
                color: white;
            }
            .seconds { 
                display: inline-block;
                width: 50px;
                height: 50px;
                padding: 5px;
                margin: 1px;
                line-height: 50px;
                font-size: 30px;
                text-align: center;
                background-color: black;
                color: white;
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6540187a9da844139d0b5be807f4072a.png