阶段02-DOM基础(总结03)

苍山洱海胖

已于 2022-08-08 17:40:34 修改

阅读量86

点赞数

分类专栏： # js日常 ====前端==== js部分文章标签： js dom

于 2021-10-04 14:10:02 首次发布

本文链接：https://blog.csdn.net/Selina_lxh/article/details/120570934

版权

====前端==== 同时被 3 个专栏收录

208 篇文章 2 订阅

订阅专栏

js部分

82 篇文章 0 订阅

订阅专栏

js日常

51 篇文章 0 订阅

订阅专栏

1.addEventListener
2.捕获和冒泡
3.定时器

setTimeout(); 延迟执行

setInterval(); 循环执行

clearTimeout(); 清除延迟执行的定时器

clearInterval(); 清除循环执行的定时器

案例:短信验证码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <button>发送</button>

    <script>
        var btn = document.querySelector('button');
        btn.onclick = function () {
            var count = 5;
            btn.disabled = true;
            btn.innerText = count + 's';
            var timer = setInterval(function () {
                if (count === 1) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerText = '发送';
                } else {
                    count--;
                    btn.innerText = count + 's';
                }

            }, 1000);
        }
    </script>
</body>

</html>

案例:倒计时

 <body>
        <h1>距离光棍节,还有</h1>
        <div class="item">
            <span><span class="day">00</span>天</span>
            <strong><span class="hour">00</span>时</strong>
            <strong><span class="min">00</span>分</strong>
            <strong><span class="second">00</span>秒</strong>
        </div>

        <script>
            var endTime = new Date("2019-11-11");
            var dayEl = document.querySelector(".day");
            var hourEl = document.querySelector(".hour");
            var minEl = document.querySelector(".min");
            var secondEl = document.querySelector(".second");
            setInterval(function() {
                // 获取当前时间
                var nowTime = new Date();
                var cha = endTime - nowTime; // 获取相差的毫秒数
                // console.log(cha);
                // 转换  天  时  分  秒
                var DAY_MS = 1000 * 60 * 60 * 24;
                var HOUR_MS = 1000 * 60 * 60;
                var MIN_MS = 1000 * 60;
                var SECOND_MS = 1000;
                var day = Math.floor(cha / DAY_MS);
                console.log(day);
                var hour = Math.floor((cha % DAY_MS) / HOUR_MS);
                var min = Math.floor((cha % HOUR_MS) / MIN_MS);
                var second = Math.floor((cha % MIN_MS) / SECOND_MS);
                dayEl.innerText = wrap(day);
                hourEl.innerText = wrap(hour);
                minEl.innerText = wrap(min);
                secondEl.innerText = wrap(second);
            }, 1000);

            function wrap(num) {
                return num < 10 ? "0" + num : num;
            }
        </script>
    </body>
</html>