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

猫哥的技术博客
1,284 阅读4分钟

最终效果

需要实现的功能

  1. 点击启动, 开始倒计时
  2. 点击暂停, 结束倒计时, 再次点击启动, 继续倒计时
  3. 连续点击启动, 倒计时不受影响
  4. 倒计时, 秒针走完一分钟, 分钟自动减一, 秒针从 59 开始
  5. 倒计时结束, 弹框提醒
  6. 如果小于 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终止函数, 并返回值

专栏地图

avatar
文章
阅读
粉丝