08-JavaScript BOM（第一天）-CSDN博客

本文链接：https://blog.csdn.net/yfp020907/article/details/132698652

1.BOM和DOM

DOM 文档，html的元素

BOM 浏览器，浏览器提供的各种api

2.超时定时器 setTimeout

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 超时定时器
        // setTimeout(回调函数，事件)  时间是毫秒
        setTimeout(function () {
            console.log('三秒后执行');
        }, 3000)

        // 给定时器起一个名字
        var timeoutId = setTimeout(function () {
            console.log('五秒后执行');
        }, 5000)
    </script>
</body>

</html>

3.清除超时定时器 clearTimeout

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var timeoutId = setTimeout(function () {
            console.log('五秒后执行');
        }, 5000)
        // 清除超时定时器
        clearTimeout(timeoutId);
    </script>
</body>

</html>

4.间歇定时器 setInterval

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 间歇定时器，每隔多长时间执行一次
        // setIntervar(回调函数，时间)  时间是毫秒
        setInterval(function () {
            console.log('每隔三秒执行一次');
        }, 3000)

        var intervalId = setInterval(function () {
            console.log('每隔一秒执行一次');
        }, 1000)
    </script>
</body>

</html>

5.清除间歇定时器 clearInterval

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var intervalId = setInterval(function () {
            console.log('每隔一秒执行一次');
        }, 1000)

        // clearsetInterval() 清除间歇定时器
        clearInterval(intervalId);
    </script>
</body>

</html>

6.同步时间案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script>
        // 获取当前时间

        // console.log(now);

        // //获取国庆时间
        // var nat = new Date('2023-10-01 00:00:00');
        // console.log(nat);

        // // 时间差
        // var time = nat.valueOf() - now.getTime();
        // console.log(time);

        function nowTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var min = now.getMinutes();
            var os = now.getSeconds();

            var arr = ['日', '一', '二', '三', '四', '五', '六'];
            var trueWeek = arr[week];

            function fun(a) {
                if (a < 10) {
                    a = '0' + a;
                }
                return a;
            }
            hour = fun(hour);
            min = fun(min);
            os = fun(os);

            var time = year + '年' + month + '月' + day + '日' + ' 周' + trueWeek + ' ' + hour + ':' + min + ':' + os;
            return time;
        }

        var box = document.getElementsByTagName('div')[0];
        box.innerHTML = nowTime();
        // 间歇定时器
        var intervalId = setInterval(function () {
            box.innerHTML = nowTime();
        }, 1000)


    </script>
</body>

</html>

7.秒杀案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="botton" value="xxx秒后开抢" disabled>

    <script>
        // 获取按钮节点
        var btn = document.getElementsByTagName('input')[0];
        var timeout = 10;

        // 间歇定时器
        var timeId1 = setInterval(function () {
            timeout--;
            btn.value = timeout + "秒后开抢";
        }, 1000);

        // 超时定时器
        var timeId2 = setTimeout(function () {
            btn.removeAttribute('disabled');
            btn.value = '立即开抢';
            clearInterval(timeId1);
        }, timeout * 1000);
    </script>
</body>

</html>

8.同步和异步

js 单线程，从上到下挨个执行

分为同步代码异步代码

js会先执行同步代码，遇到异步代码，则会放到异步队列当中，等待同步代码全部执行完毕，

再执行异步队列中的代码（在异步队列中，先进入队列的先执行）

9.匀速动画案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 1200px;
            height: 800px;
            border: 1px solid red;
            position: relative;
            margin: 0 auto;
        }

        .son {
            width: 150px;
            height: 150px;
            background-color: pink;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div>
        <input type="button" name="" id="" value="向右移动" class="right">
        <input type="button" name="" id="" value="向左移动" class="left">
        <input type="button" name="" id="" value="向下移动" class="bot">
        <input type="button" name="" id="" value="向上移动" class="top">
    </div>
    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        // 获取按钮节点
        var right = document.getElementsByClassName('right')[0];
        var left = document.getElementsByClassName('left')[0];
        var bot = document.getElementsByClassName('bot')[0];
        var _top = document.getElementsByClassName('top')[0];


        // 获取大盒子节点
        var father = document.getElementsByClassName('father')[0];

        // 获取小盒子节点
        var son = document.getElementsByClassName('son')[0];

        var timeM;
        right.onclick = function () {
            clearInterval(timeM);
            timeM = setInterval(function () {
                if (son.offsetLeft >= father.clientWidth - son.offsetWidth) {
                    // son.style.left = father.clientWidth - son.clientWidth;
                    clearInterval(timeM);
                } else {
                    son.style.left = son.offsetLeft + 10 + 'px';
                }
            }, 20);
        }
        left.onclick = function () {
            clearInterval(timeM);
            timeM = setInterval(function () {
                if (son.offsetLeft <= 0) {
                    clearInterval(timeM);
                } else {
                    son.style.left = son.offsetLeft - 10 + 'px';
                }
            }, 20)
        }
        bot.onclick = function () {
            clearInterval(timeM);
            timeM = setInterval(function () {
                if (son.offsetTop >= father.clientHeight - son.clientHeight) {
                    // son.style.left = father.clientWidth - son.clientWidth;
                    clearInterval(timeM);
                } else {
                    son.style.top = son.offsetTop + 10 + 'px';
                }
            }, 20);
        }

        _top.onclick = function () {
            clearInterval(timeM);
            timeM = setInterval(function () {
                if (son.offsetTop <= 0) {
                    clearInterval(timeM);
                } else {
                    son.style.top = son.offsetTop - 10 + 'px';
                }
            }, 20)
        }
    </script>
</body>

</html>