JavaScript DOM案例 js dom bom

转载

mob64ca14133dc6 2023-12-01 21:14:13

文章标签 JavaScript DOM案例 html 加载回调函数 文章分类 JavaScript 前端开发

js DOM 和 BOM 学习第四天

JavaScript DOM案例 js dom bom_html

1. BOM概述

1.1 什么是BOM

BOM（Browser Object Model）,浏览器对象模型，它提供了独立于内容的与浏览器窗口进行交互的对象，核心对象：window
BOM由一系列对象组成，对象有多属性和方法
BOM缺乏标准，js标准ECMA，DOM标准W3C，BOM最初是NetScape浏览器标准

图解

JavaScript DOM案例 js dom bom_JavaScript DOM案例_02

BOM结构图

JavaScript DOM案例 js dom bom_回调函数_03

1.2 BOM的构成

window对象是浏览器的顶级对象

它是js访问浏览器的一个接口
它是一个全局对象，定义在其中的变量和函数都成为了它的属性和方法

window有一个特殊属性：window.name，默认是空

示例

<!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>
        // 1.顶级对象window

        window.alert(11);
        alert(11);
        console.log(window.name);
        function f1(){
            console.log(12);
        }

        f1();
        window.f1();
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_加载_04

2. window 对象的常见事件

2.1 窗口加载事件

window.οnlοad=function(){}

window.addEventListener('load',function(){})

当窗口内容（css样式表，图片，脚本文件等）全部加载完毕后在执行处理函数
有了这个，就可以把js代码写在页面元素的上方
传统写法以最后一个为准，监听器方法可写多个

2.1.2 开发中更常用的窗口加载事件

document.addEventListener('DOMContentLoaded',function(){})

当HTML元素加载完（不包括图片，样式表）后再执行处理函数，提高用户体验

示例

<!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>
    <script>
        // 1.提高窗口加载事件使script文件放在元素前
        window.addEventListener('load',function(){
            alert('555');
        })


        // 
        window.addEventListener('load',function(){
            var btn=document.querySelector('button');
            btn.onclick=function(){
            alert('666')
        }
        })

        // DOM页面加载完毕（html元素加载完毕）
        window.addEventListener('DOMContentLoaded',function(){
            alert('777');
        })
        
    </script>
</head>
<body>
    <button>按钮</button>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_JavaScript DOM案例_05

2.2 调整窗口大小事件

window.οnresize=function(){};

window.addEventListener('resize',function(){})

窗口大小发生改变，事件触发
window.innerWidth当前屏幕的宽度

示例

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        window.addEventListener('load',function(){
            var div=document.querySelector('div');
            // 当前窗口宽度小于900px是，隐藏粉色盒子
            window.addEventListener('resize',function(){
                if(window.innerWidth<='900'){
                    div.style.display='none';
                }else{
                    div.style.display='block';
                }
            })
        })
    </script>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_JavaScript DOM案例_06

3. 定时器（window对象的方法）

3.1 setTimeout定时器

window.setTimeout(调用函数，延迟的毫秒数（默认是0）)

延迟毫秒数后执行调用函数,调用一次

注意点

window可以省略，对象方法
调用函数的三种形式（匿名函数，函数名，‘函数名（）’）
定时器推荐起名

示例

<!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>
        // 1.setTimeout定时器
        // window可省略
        var timer1=setTimeout(function(){
            alert(666);
        },2000);

        // 推荐给定时器起名

        function f1(){
            alert('777');
        }

        // 调用函数的第二种写法
        var timer2=setTimeout(f1,5000);
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_加载_07

回调函数

时间到了才去执行该函数，称为回调函数
如定时器，鼠标点击事件，键盘事件，窗口加载事件，其处理函数都是到了一定时间才会去执行

示例

<!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>
    <img src="./images/ad.jpg" alt="">

    <script>
        // 1.让图片在5秒后自动隐藏
        var img=document.querySelector('img');
        setTimeout(function(){
            img.style.display='none';
        },5000)
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_JavaScript DOM案例_08

3.2 停止定时器

window.clearTimeout(定时器的名字)

清除指定的定时器，window可省略

示例

<!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>
    <button>停止计时器</button>
    <script>
        // 1.设置定时器
        var timer=setTimeout(function(){
            alert(888)
        },5000);

        // 2.停止计时器
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            clearTimeout(timer);
        })
        
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_加载_09

3.3 setInterval定时器

window.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>
        // setInterval定时器
        setInterval(function(){
            console.log(100);
        },2000)
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_JavaScript DOM案例_10

倒计时案例

<!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>

        *{
            padding: 0;
            margin: 0;
        }
        .box div{
            margin:15px;
            float: left;
            width: 100px;
            height: 100px;
            background-color: #000;
            color: #fff;
            font-size: 40px;
            text-align: center;
            line-height: 100px;
        }

        .box {
            width: 600px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="hour">1</div>
        <div class="minute">2</div>
        <div class="second">3</div>
    </div>


    <script>

        var inputTime=+new Date('2022-2-20 23:00');//返回用户输入时间的总毫秒数
        var hour=document.querySelector('.hour');
        var minute=document.querySelector('.minute');
        var second=document.querySelector('.second');

        // 先执行一次
        countDown();
        // 设置一个定时器

        setInterval(countDown,1000)

        function countDown(){
            var nowtime=+new Date();
            
            var restTime=(inputTime-nowtime)/1000;

            var s=parseInt(restTime%60);
            // 前补零
            s=s<10? '0'+s:s;
            second.innerHTML=s;
            var m=parseInt(restTime/60%60);
            m=m<10? '0'+m:m;
            minute.innerHTML=m;
            var h=parseInt(restTime/60/60%24);
            h=h<10? '0'+h:h;
            hour.innerHTML=h;
            
        }
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_加载_11

3.4 停止setInterval定时器

window.clearInterval(intervalID)

取消之前通过调用setInterval（）建立的定时器
window可以省略

示例

<!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>
    <button>开启定时器</button>
    <button>停止定时器</button>
    <script>
        var begin=document.querySelector('button');
        var stop=begin.nextElementSibling;
        var timer=null;
        begin.onclick=function(){
            timer=setInterval(function(){
                console.log('输出');
            },1000)
        }

        stop.onclick=function(){
            clearInterval(timer)
        }
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_html_12

3.5 this指向

全局作用域和普通函数中的this指向顶级对象window（定时器里面的this也是window，定时器也是window对象的方法）
方法调用时谁调用方法指向谁
构造函数中this指向构造函数的实例对象

示例

<!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>
    <button>按钮</button>
    <script>
        // 1.全局作用域下和普通函数this指向
        console.log(this);

        function fn1(){
            console.log(this);
        }

        fn1();

        // 2.方法调用者

        var o={

            sayhi:function(){
                console.log(this);
            }
        }

        o.sayhi();

        var btn=document.querySelector('button');
        btn.onclick=function(){
            console.log(this);
        }


        // 3. 构造函数的this指向
        function Fan(){
            console.log(this);
        }

        var fun=new Fan();
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_回调函数_13

4.js执行机制

4.1 js执行机制为单线程

同一时间只能做一件事

4.2 同步和异步

HTML5提出了web worker标准，允许js创建多线程
同步：前一个任务执行完毕后再去执行下一个任务
异步：在做这件事的同时可以处理其他事件

示例

<!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>
        // 由于h5 提出的标准，会异步执行该流程代码
        console.log(1);
        setTimeout(function(){
            console.log(3);
        },3000)
        console.log(2);
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_html_14

4.3 同步任务和异步任务

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务

js的异步是通过回调函数来实现的

异步任务的类型

普通事件：click，resize
加载事件：load，error
定时器：setInterval，setTimeout

异步任务相关的回调函数添加到任务队列(消息队列)中
图解

JavaScript DOM案例 js dom bom_加载_15

4.4 js执行机制

先执行执行栈中的同步任务
遇到含有回调函数的同步任务，将回调函数放入消息队列
继续执行执行栈中的同步任务
当执行栈中所有同步任务执行完毕后，再去消息队列执行异步任务

示例

<!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>
        // 根据任务执行机制，得到1 2 3
        console.log(1);
        setTimeout(function(){
            console.log(3);
        },0);
        console.log(2);
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_回调函数_16

图解

JavaScript DOM案例 js dom bom_JavaScript DOM案例_17

主线程不断的重复获得任务，执行任务，再获取，执行任务，这种机制称为事件循环（event loop）

一个实例

<!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>

        // 先处理执行栈任务，在执行消息队列任务，循环检测消息队列是否存在任务
        console.log(1);
        document.onclick=function(){
            console.log('click');
        }

        console.log(2);

        setTimeout(function(){
            console.log('timeout');
        },3000)
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_回调函数_18

5.location对象

5.1 什么是location对象

window对象提供的一个属性
获取或设置窗体的url，可以解析url，返回的是一个对象

5.2 URL

统一资源定位符（Uniform Resource Locater）
包含的信息指出文件的位置已经浏览器应该怎么处理它
一般的语法格式

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

[]包裹的内容可选

组成

组成	说明
protocol	通信协议
host	主机（域名）
port	端口号，http默认端口80，可省略
path	路径由零或多个’/'隔开的字符串，表示主机上一个目录或文件地址
query	可选参数，以键值对形式呈现，用&号隔开
fragment	片段 #后面内容常用于链接锚点

5.3 location对象的属性

通过window提供的location属性返回的是一个location对象
对象属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	获取主机（域名）
location.port	获取端口号，如果未写，返回空串
location.pathname	获取路径名
location.search	获取参数
location.hash	返回片段，#后面内容

示例

JavaScript DOM案例 js dom bom_html_19

5s后跳转页面案例

<!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>
        var div=document.querySelector('div');
        var cnt=5;
        f1();
        // 5s后跳转到百度首页
        setInterval(f1,1000)

        function f1(){
            if(cnt===0){
                location.href='https://www.baidu.com/';
            }else{
                div.innerHTML='还有'+ cnt+'s后跳转到首页';
                cnt--;
            }
        }
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_html_20

各个页面之间的信息传递

登录页

<!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>
    <form action="index.html">
        <input type="text" name="uname">
        <button type="submit">登录</button>
    </form>
</body>
</html>

首页

<!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>
        // 1.获取login来的参数
        var info=location.search;
        // console.log(info);
        // 2.去掉uname中的问号
        // 从下标1开始取，第二个参数不写，取到底
        var sub=info.substr(1);
        // 将字符串分隔成键值对
        var arr=sub.split('=');

        // 获取值给div

        var div=document.querySelector('div');
        div.innerHTML=arr[1]+'欢迎你';
        
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_html_21

5.4 location 对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（重定向页面），可以后退
location.replace()	替换当前页面，不能后退
location.reroad()	重新加载页面，相对于刷新，如果参数为true，相对于ctrl+f5 强制刷新

示例

<!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>
    <button>按钮</button>
    <script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            // 1.跳转到新页面，可后退
            // location.assign('https://www.baidu.com/');
            // 2.替换当前页面，不可后退
            // location.replace('https://www.baidu.com/');
            // 3.刷新页面
            location.reload();
        })
    </script>
</body>
</html>

assign效果图

JavaScript DOM案例 js dom bom_JavaScript DOM案例_22

replace效果图

JavaScript DOM案例 js dom bom_html_23

reload效果图

JavaScript DOM案例 js dom bom_回调函数_24

6. navigator 对象

包含有关浏览器的信息，它由许多属性，最常用的：userAgent，该属性值返回由客户机发送服务器的user-agent头部的值
下面前端代码可以判断用户哪个终端打开，实现跳转

JavaScript DOM案例 js dom bom_回调函数_25

7.history 对象

window提供的对象
与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口）中访问过的URL

history 对象方法	作用
back()	可以后退功能
forword（）	前进功能
go(参数)	前进后退功能，如果是1，前进1步，-1则后退一步

示例

首页

<!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>
    <a href="./list.html">前往列表页</a>
    <button>前进</button>
    <script>
        var btn=document.querySelector('button');
        btn.onclick=function(){
            history.forward();
        }
    </script>
</body>
</html>

列表页

<!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>
    <a href="./index.html">回到首页</a>
    <button>回退</button>
    <script>
        var btn=document.querySelector('button');
        btn.onclick=function(){
            history.back();
        }
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_回调函数_26

8.课后作业

1.电子时钟

<!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>
        div{
            width: 400px;
            font-size: 20px;
            margin: 100px auto;
            background-color: skyblue;
            text-align: center;
            
        }
    </style>
</head>
<body>
    <div></div>
    <script>

        function getCurTime(){
            var date=new Date();
            console.log(date);

            var year=date.getFullYear();
            var month=date.getMonth();
            var dates=date.getDate();
            var hour=date.getHours();
            hour=hour<10 ? '0'+hour : hour;
            var minute=date.getMinutes();
            minute=minute<10 ? '0'+minute : minute;
            var second=date.getSeconds();
            second=second<10 ? '0'+second : second;
            var day=date.getDay();
            var days=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            return year+'年'+month+'月'+dates+'日'+days[day]+' '+hour+':'+minute+':'+second;
        }

        var div=document.querySelector('div');
        div.innerHTML=getCurTime();
        setInterval(function(){
            div.innerHTML=getCurTime();
        },1000)

        
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_html_27

2. 光棍节倒计时

<!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>

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box{
            width: 500px;
            margin: 100px auto;
            /* background-color: pink; */
            text-align: center;
        }

        .box h2{
            margin-bottom: 30px;
        }

        .box span{
            display: inline-block;
            text-align: center;
            height: 30px;
            width: 60px;
            line-height: 30px;
        }

        .box span:nth-of-type(1){
            color: orange;
        }

        .box span:nth-of-type(n+2){
            color: #fff;
            background-color: orange;
            
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>距离光棍节，还有</h2>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>

    <script>
        var iptTime=new Date('2022-11-11 00:00:00');
        var rDay=document.querySelector('span');
        var rHour=rDay.nextElementSibling;
        var rminute=rHour.nextElementSibling;
        var rsecond=rminute.nextElementSibling;
        getCntTime();
        setInterval(getCntTime,1000);
        function getCntTime(){
            var nowTime=new Date();
            var restTime=(iptTime-nowTime)/1000;
            var s=parseInt(restTime%60);
            s=s<10? '0'+s:s;
            rsecond.innerHTML=s+'秒';
            var m=parseInt(restTime/60%60);
            m=m<10? '0'+m:m;
            rminute.innerHTML=m+'分';
            var h=parseInt(restTime/60/60%24);
            h=h<10? '0'+h:h;
            rHour.innerHTML=h+'时';
            var day=parseInt(restTime/60/60/24);
            rDay.innerHTML=day+'天';
        }
    </script>
</body>
</html>

效果图

JavaScript DOM案例 js dom bom_加载_28

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：android 原生异步返回js信息 http异步回调

下一篇：python结合ps python结合flask成语接龙代码

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯