Window对象-BOM相关操作

最新推荐文章于 2024-01-05 20:46:58 发布

一个爱编程的00后

最新推荐文章于 2024-01-05 20:46:58 发布

阅读量203

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_57193827/article/details/126036476

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

1.BOM（浏览器对象模型）

含义: window 是内置中的全局对象，我们所学习的所有Web APIs 的知识内容都是基于window对象实现的

setInterval() -- > 完整写法window.setInterval (默认都是浏览器内)

document是实现DOM的基础，它其实是依附于window的属性

(依附于window的属性可以省略)

2.定时器 -- 延时函数

间歇函数 : setInterval(function,1000) -- 1000ms 执行一次

延时函数 : 让代码延迟执行的函数，setTimeout

setTimeout ( 回调函数 , 等待的毫秒数 )

只执行一次,就是把一段代码延迟执行，省略window

let timer = setTimeout(回调函数，等待ms)
clearTimeout(timer)  // 也可以选择停止执行

    <button>解除炸弹</button>

    <script>
        let timer = setTimeout(function () {
            document.querySelector('body').style.backgroundColor = 'pink'
        },3000)  // 三秒之后执行
        // 可以停止
        let btn = document.querySelector('button')
        btn.addEventListener('click',function() {
            console.log('解除成功');
            clearTimeout(timer)
        })
        
    </script>

5s后自动关闭广告

<body>
    <div>
        5s后自动关闭广告
    </div>

    <script>
        // 设置广告5s之后自动消失
        let div = document.querySelector('div')

        // 设置一个倒计时
        let t = 5
        let timer = setInterval(function () {
            --t
            div.innerHTML = `
            ${t}s后自动关闭广告
            `
        },1000)

        setTimeout(function () {
            div.style.display = 'none'
            clearInterval(timer)
        },6000)
    </script>
</body>

2.1、递归函数

    <script>

        // 递归函数  -- 容易造成死递归 ， 一定要记得加退出条件
        let num = 0;
        function fn() {
            num ++;
            console.log(num);
            if(num >= 100){
                return
            }
            // 函数里面一直调
            fn()

        }
        fn()
    </script>

2.2、利用递归实现setInterval

<body>
    
    <div class="d1"></div>

    <div class="d2"></div>
    <script>
        let d1 = document.querySelector('.d1')
         
        // 两种定时器 进行时间的输出
        function time() {
            d1.innerHTML = new Date().toLocaleString()
            setTimeout(time,1000)
        }
        time()


        let d2 = document.querySelector('.d2')
        // 直接用定时器来写
        setInterval(function () {
            d2.innerHTML = new Date().toLocaleString()
        },1000)
    </script>
</body>