[作特效, 学JS] -- 08 倒计时

时间 2019-11-17

标签特效倒计时栏目 JavaScript 繁體版

原文原文链接

最终效果

须要实现的功能

点击启动, 开始倒计时
点击暂停, 结束倒计时, 再次点击启动, 继续倒计时
连续点击启动, 倒计时不受影响
倒计时, 秒针走完一分钟, 分钟自动减一, 秒针从 59 开始
倒计时结束, 弹框提醒
若是小于 10, 前补零

实现代码

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>倒计时时钟</title>
        <style> body, div { margin: 0; padding: 0; } #countdown { width: 300px; text-align: center; margin: 10px auto; padding: 20px 0; } span { color: #000; width: 80px; line-height: 2; background: #fbfbfb; border: 2px solid #b4b4b4; margin: 0 10px; padding: 0 10px; } </style>
    </head>
    <body>
        <div id="countdown">
            <span>01</span>
            分钟
            <span>20</span>
            秒
            <input type="button" value="启动" />
            <input type="button" value="暂停" />
        </div>
        <script src="demo.js"></script>
    </body>
</html>
复制代码

window.onload = function(){
    // 获取启动按钮
    oStart = document.querySelector('input[value="启动"]');
    // 获取暂停按钮
    oPause = document.querySelector('input[value="暂停"]');
    // 剩余时间, 参与到后面的运算
    var timeleft = 0; 
    // 定时器, 用来关掉定时任务, 另一个,判断若是已经开启, 点击启动按钮, 就不在执行
    var timer = null; 


    // 点击启动, 判断, 若是定时任务已经启动, 就再也不执行
    oStart.onclick = function(){
        if(!timer){
            // 获取剩余时间
            getTimeLeft();
            // 开启是一个定时任务, 每秒执行一次
            timer = setInterval(updateTime,100);
        }
    }

    // 点击暂停
    oPause.onclick = function(){
        // 清除当前定时任务
        clearInterval(timer);
        // 清除原来的值, 还原计时器的初始值. 恢复默认的null
        timer = null;
    }


    // 定时任务的逻辑, 每秒, 剩余时间减一
    function updateTime(){
        timeleft--;
        // 若是剩余时间, 小于0, 执行暂停按钮的逻辑, 中止定时任务
        if(timeleft<0) {
            clearInterval(timer);
            timer = null;
            alert('倒计时结束!'); // 输出弹框
            return; // 终止函数
        }
        // 每一秒, 总的剩余时间变化的时候, 都会执行
        showTime(); 
    }
    
    // 计算剩余时间
    function getTimeLeft(){
        // 获取分钟数 "01"
        var iMin = document.querySelector('#countdown>span:nth-child(1)').innerHTML
        // 获取秒数
        var iSec = document.querySelector('#countdown>span:nth-child(2)').innerHTML
        // 计算剩余时间并返回
        timeleft = parseInt(iMin)*60+parseInt(iSec);
    }

    // 显示时间, 把剩余时间拆分红, 分钟数和秒数, 分别写入到span里面
    function showTime(){
        var iMin = parseInt(timeleft/60); // 计算分钟数
        var iSec = parseInt(timeleft%60); // 计算秒数
        // 若是数字小于10, 前补零
        if(iMin<10){
            iMin = "0"+iMin;
        }
        if(iSec<10){
            iSec = "0"+iSec;
        }
        // 把分钟数写入到span标签中
        document.querySelector('#countdown>span:nth-child(1)').innerHTML = iMin;
        // 把秒数写入到span标签中
        document.querySelector('#countdown>span:nth-child(2)').innerHTML = iSec;
    }
}
复制代码

`innerHTML`和`innerText`

innerHTML, 获取标签对象里面的html代码
innerText, 获取标签对象里面的文本内容
可获取和赋值

`setInterval()`和`clearInterval()`

setInterval, 设置一个时间间隔, 循环执行一个函数, 定时任务
参数一: 函数名, 参数二:时间间隔, 单位是毫秒
clearInterval清除以前设定的任务
参数一: 以前setInterval的返回值

`setTimeout()`和`clearTimeout()`

setTimeout, 延时执行函数
参数一: 函数名, 参数二: 延迟时间, 单位是毫秒
clearTimeout, 清除以前的延时任务
参数一: setTimeout的返回值

强制类型转换 `parseInt()`

强制类型转换, 把其余类型的变量, 转成整数类型

`break`和 `return`

break终止循环
return终止函数, 并返回值

[作特效, 学JS] -- 08 倒计时

最终效果

须要实现的功能

实现代码

innerHTML和innerText

setInterval()和clearInterval()

setTimeout()和clearTimeout()

强制类型转换 parseInt()

break和 return

专栏地图

`innerHTML`和`innerText`

`setInterval()`和`clearInterval()`

`setTimeout()`和`clearTimeout()`

强制类型转换 `parseInt()`

`break`和 `return`