BOM01

最新推荐文章于 2024-08-11 18:40:36 发布

rcj15651130122

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量38

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/rcj15651130122/article/details/131075041

版权

一、BOM简介

BOM:(Browser Object Model)浏览器对象模型，浏览器窗口交互的对象，核心是window

DOM：文档对象模型，把文档当成对象，操作页面元素，document

BOM：浏览器对象模型，把浏览器当做对象，浏览器相关的互动操作，window包含document

二、window加载事件

<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>
    <script>
        //window.onload加载，等页面内容全部加载完毕(dom元素/图片/css等等)后再执行
        // window.onload = function(){
        //     var btn = document.querySelector('button')
        //     console.log(btn);
        // }

        //load和DOMContentloaded加载速度不一样。DOMContentloaded加载速度快
        //这种写法常用，一个页面可以写很多load事件
/*         window.addEventListener('load',function(){
            var btn = document.querySelector('button')
            console.log(btn);           
        }) */
        //DOMContentloaded 页面加载，只等DOM元素加载完毕，就会立即执行
        document.addEventListener('DOMContentLoaded',function(){
        var btn = document.querySelector('button')
        btn.onclick = function(){
            console.log(111);
        }
        })

        //窗口事件，只要窗口大小发生变化就会执行这个事件
/*         window.onresize = function(){
            console.log('111');
        } */
    </script>
</head>
<body>
    <!-- 页面加载顺序是从上到下，所以js写在上面时，标签还没加载出来，会导致拿不到元素 -->
    <button>按钮</button>
    
    <script>
/*         var btn = document.querySelector('button')
        btn.onclick = function(){
            console.log(111);
        } */
    </script>
</body>

三、setTimeout定时器

<body>
    <!-- 
        定时器：就是设置一个时间，等到了这个时间就会执行里面的代码
            语法：setTimeout(调用函数,延迟的时间(毫秒单位))
            如果没写延迟时间的话或者写的0，默认不延迟，立马执行
            定时器里面的这个函数也称为回调函数(时间到了再调用这个函数)
            事件对象也是回调函数(onclick onmouseout等等)
            给定时器一个变量名(常用)
            setTimeout只执行一次(如果没有再次触发时)
     -->

     <button>按钮</button>
     <!-- 
        clearTimeout(定时器名) 清除定时器
        定时器清除时需要写在定时器的外面，写在其他位置时不能阻止定时器的触发
    -->
     <script>
         var timer = setTimeout(function(){
            console.log(((111111)));
            clearTimeout(timer)
        },2000)       

/*         var btn = document.querySelector('button')
        btn.onclick = function(){
        var timer = setTimeout(function(){
            console.log((11111));
        },3000)
        clearTimeout(timer)
        } */

        //定时器的this是指向window
/*         window.setTimeout(function(){
            console.log(this);
        },2000) */

/*         var timer = setTimeout(function(){
            console.log((11111));
        },3000) */

        // setTimeout(fn,2000)
        // function fn(){
        //     console.log((22222))
        // }
     </script>
</body>

四、setInterval定时器

<body>
    <button class="begin">开始</button>
    <button class="end">结束</button>
    <script>
        var begin = document.querySelector('.begin')
        var end = document.querySelector('.end')
        var timer = null
        begin.onclick=function(){
         timer=setInterval(function(){
            console.log(11111);
        },1000)           
        }
        end.onclick = function(){
            clearInterval(timer)
        }
        //setInterval(回调函数，延迟时间)
        //setInterval只要触发就会一直执行
        // var timer=setInterval(function(){
        //     console.log(11111);
        // },1000)
        // clearInterval(timer)
    </script>
</body>

五、倒计时案例

<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        getTime()
        setInterval(getTime,1000)
        function getTime(){
        var nowTime = +new Date() //现在的时间
        var oldTime = +new Date('2023-6-18 20:00:00')  //目标时间
        var time = (oldTime - nowTime) / 1000 //把毫秒数变成秒数
        var d = parseInt(time / 60 / 60 / 24)  //天数
        var h = parseInt(time / 60 / 60 % 24)  //小时
        var m = parseInt(time / 60 % 60)   //分钟
        var s = parseInt(time % 60) //秒
        div.innerHTML = d + '天' + h + '时' + m + '分' + s + '秒'//18天20时9分32秒
        }
    </script>
<!--     <div></div>
    <script>
        var div = document.querySelector('div')
        //在定时器执行之前先调用一次倒计时，防止页面加载时出现空白问题
        getTime()
        //开启定时器，每隔一秒获取最新的倒计时，实现动态显示倒计时事件
        setInterval(getTime,1000)
        //封装时间函数
        function getTime(){
            var t = new Date()
            var y = t.getFullYear()//年
            var m = t.getMonth()+1>10?t.getMonth()+1:'0'+(t.getMonth()+1)//月
            var d = t.getDate()>10?t.getDate():'0'+(t.getDate())//日
            var h = t.getHours()>10?t.getHours():'0'+(t.getHours())//时
            var mt = t.getMinutes()>10?t.getMinutes():'0'+(t.getMinutes())//分
            var s = t.getSeconds()>10?t.getSeconds():'0'+(t.getSeconds())//秒
            //把倒计时事件放入到div中
            div.innerHTML=y+'-'+m+'-'+d+'   '+h+':'+mt+':'+s
        }       
    </script> -->
</body>

六、发送短信倒计时案例

<body>
    <input type="text"><button>发送</button>
    <script>
        var btn = document.querySelector('button')
        var ipt = document.querySelector('input') 
        var num=3
        btn.onclick=function(){
            //点击的时候让按钮禁用
            btn.disabled=true
            ipt.innerHTML=ipt.value
            alert(ipt.value)
            var timer =setInterval(function(){
                if(num==0){
                    //时间等于0时，清除定时器
                    clearInterval(timer)
                    btn.innerHTML='发送'
                    btn.disabled=false
                    num=3
                }
                else {
                    btn.innerHTML = num +'秒'
                    num--
                }
            },1000)
        }
    </script>
</body>

七、 js执行机制：

单线程，一个时间点只能执行一个任务，不能同时执行多个任务，(多线程执行)

同步任务和异步任务

同步任务：都在主线程上执行，形成一个执行栈(主车道)

异步任务：相关回调函数添加到任务队列中(应急车道)

八、location对象

location:BOM(window)的一个对象，location对象，location可以通过相关的属性获取或者设置浏览器地址栏中的url地址，

url地址包含的内容(组成)：

通信协议(protocol):http

域名(host):120.0.0.1

端口号(post):5500 可有可无 http默认的端口号是80 https默认

路径(path):location对象.html

参数(query):uname='李四'&age=18 是？后面的每个参数之间用&符号链接

锚点(fragment):#后面内容 hsah 链接锚点

九、location相关属性

<body>
    <form action="https://www.jd.com"> 
    <label for="">姓名:</label><input type="text" name="uname"></label>
    <label for="">密码:</label><input type="password" name="password"></label>
    <input type="submit" value="提交">
    </form> 
    <div class="box">
        <a href="#hash">京东</a>
    </div>
        <div id="hash">11111</div>

    <script>
        //location.href 获取url地址 常用 // 'https://www.jd.com/?uname=123&password=456'
        //location.host 获取url域名(如果有端口号也会展示端口号)// 'www.jd.com'
        //location.port 获取url端口号// ''
        //location.pathname 获取url路径// '/'
        //location.search 获取url参数 常用// '?uname=123&password=456'
        //location.hash 获取url#后面的值 锚点值// '#hash'
    </script>
</body>