Window对象

1.BOM(浏览器对象模型)

2. 定时器-延时函数

4.递归实现setinterval

5.JS执行机制

Window对象

1.BOM(浏览器对象模型)

// BOM

//  BOM(Browser Object Model ) 是浏览器对象模型

//  window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的

// window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）

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

// 注：依附于 window 对象的所有属性和方法，使用时可以省略 window

// 如:window.scroll

// window.alert()

// window是最大对象

var a=19;//使用var声明的变量其实就是相当于给window对象添加属性

2. 定时器-延时函数

// 定时器-延时函数

// 🏆 JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

// 语法：

// setTimeout();

// let id = setTimeout(function () { alert('1秒到了') }, 1000)

//只执行一次

// 这个方法有两个参数,

// 第一个参数是一条或一组js语句,并用引号括住他们,

// 第二个参数是要等待的时间以毫秒为单位.

// setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window,在延时函数中的this是window

// 🏆清除延时函数：

clearTimeout()

// 用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>
    <style>
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>

<body>
    <button>解除定时器</button>
    <img src="../素材/images/ad.png" alt="">
    <script>
        // 定时器-延时函数

        // 🏆  JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
        //  语法：
        // setTimeout();
        // let id = setTimeout(function () { alert('1秒到了') }, 1000)
        let id = setTimeout(function () {
            // alert('2秒到了')
            // display之前一定要加style
            console.log(this);//window
            document.querySelector('button').disabled = true
            document.querySelector('img').style.display = 'none'
        }, 2000)

        //只执行一次
        // 这个方法有两个参数,
        // 第一个参数是一条或一组js语句,并用引号括住他们,
        // 第二个参数是要等待的时间以毫秒为单位.

        //   setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
        //  🏆清除延时函数：
        document.querySelector('button').addEventListener('click',
            function () {
                clearTimeout(id)
            })
        // 用clearTimeout()方法来停止计时,括号中写指定要停止的定时器的标识符.
    </script>
</body>

</html>

4.递归实现setinterval

// 递归函数:自己调用自己的函数

  let num = 0
        function fn() {
            console.log('加载中~~~~');
            num++
            if (num > 100) {
                console.log('加载失败');
                return
            }
            fn()
        }
        fn()

// 用settimeout递归实现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>
    <div></div>
    <script>
        // 递归实现setinterval
        let div=document.querySelector('div')
        function fn(){
            // 输出时间
            div.innerHTML=new Date().toLocaleString()
            // 递归
            setTimeout(fn,1000)
        }
        fn()


//          两种定时器对比：
//  setInterval 的特征是重复执行，首次执行会延时
//  setTimeout 的特征是延时执行，只执行 1 次  setTimeout 结合递归函数，能模拟 setInterval 重复执行
//  clearTimeout 清除由 setTimeout 创建的定时任务
    </script>
</body>
</html>

5.JS执行机制

// 🏆 JS 是单线程

// JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比

// 如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

// 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

// 🏆同步和异步

// 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许

// JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

// 同步任务

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

// 异步任务

// JS 的异步是通过回调函数实现的。

// 一般而言，

// 异步任务有以下三种类型:

// 1、普通事件，如 click、resize 等 2、资源加载，如 load、error 等 3、定时器，包括 setInterval、setTimeout 等

// 异步任务相关添加到任务队列中（任务队列也称为消息队列）。

// 🏆JS 执行机制

// 1. 先执行执行栈中的同步任务。 2. 异步任务放入任务队列中。

// 3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务

// 结束等待状态，进入执行栈，开始执行。

6.local对象

// location对象

//  location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

//  常用属性和方法：

// href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转 

// search 属性获取地址中携带的参数，符号？后面部分

//  hash 属性获取地址中的啥希值，符号 # 后面部分

//  reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

<!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="/#/one">第一个</a>
    <button>刷新</button>
    <a href="http://www.hao123.com" class="load">支付成功,5秒后自动跳转</a>
    <script>
        //   location对象
        //  location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

        //  常用属性和方法：
        // href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转 
        //  search 属性获取地址中携带的参数，符号 ？后面部分
        //  hash 属性获取地址中的啥希值，符号 # 后面部分
        //  reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新       

        console.log(location.href);//得到url地址
        // location.href = 'http://www.hao123.com'//跳转到hao123
        let num = 5

        let id = setInterval(function () {
            num--
            document.querySelector('.load').innerHTML = `支付成功,${num}秒后自动跳转`
            if (num <= 0) {
                clearInterval(id)
                location.href = 'http://www.hao123.com'
            }
        }, 1000)
        // 完整地址：https://www.baidu.com/s?tn=50000021_hao_pg&ie=utf-8&sc=UWd1pgw-pA7EnHc1FMfqnHmvnjDYnH61nHf4rauW5y99U1Dznzu9m1YdnHT3rHT4rj6&ssl_sample=normal&srcqid=6625912385234129344&H123Tmp=nunew7&word=%E6%92%92%E5%A4%A7%E5%A4%A7
        console.log(location.search);
        // search获取的是？之后的tn=50000021_hao_pg&ie=utf-8&sc=UWd1pgw-pA7EnHc1FMfqnHmvnjDYnH61nHf4rauW5y99U1Dznzu9m1YdnHT3rHT4rj6&ssl_sample=normal&srcqid=6625912385234129344&H123Tmp=nunew7&word=%E6%92%92%E5%A4%A7%E5%A4%A7
        console.log(location.hash);
        // 完整:https://music.163.com/#/download
        // hash:#/download

        document.querySelector('button').addEventListener('click', function () {
            location.reload(true)//加true是强制刷新
        })
        // 重新加载reload()

        //强制刷新ctrL+f5 只接更新最新内容

    </script>
</body>

</html>

7.navigeter对象

// navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

console.log(navigator.userAgent);

8.history对象

// history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

history.forward()前进

history.back()后退

history.go(1)//1是前进一个页面里面放数字正负决定前进与后退,数字决定前进后退几个页面


        document.querySelector('.forward').addEventListener('click', function () {
            history.forward()
        })

        document.querySelector('.back').addEventListener('click', function () {
            history.back()
        })
        document.querySelector('.go').addEventListener('click', function () {
            history.go(1)//1是前进一个页面
        })

本地存储

localStorage

// 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在

// 本地存储大量的数据，HTML5规范提出了相关解决方案。

// 1、数据存储在用户浏览器中

// 2、设置、读取方便、甚至页面刷新不丢失数据

// 3、容量较大，sessionStorage和localStorage约5M 左右

// 🏆localStorage

// 1、生命周期永久生效，除非手动删除否则关闭页面也会存在

// 2、可以多窗口（页面）共享（同一浏览器可以共享）

// 3. 以键值对的形式存储使用

// 💎存储数据：

// localStorage.setItem('键', '值')

      localStorage.setItem('uname', '别无人员')

// 💎 获取数据：

        localStorage.getItem('uname')
        console.log(localStorage.getItem('uname'));

//💎 删除数据：

// localStorage.removeItem('uname')

localStorage.clear()// 删除所有的 localstorage

// 🎁 存储复杂数据类型存储

// 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

// JSON.stringify(复杂数据类型)  将复杂数据转换成JSON字符串存储本地存储中

// JSON.parse(JSON字符串)  将JSON字符串转换成对象取出时候使用

//JSON属性和值都是双引号进行包含

// 很多人搞不清楚 JSON和JS对象的关系，其至连谁是谁都不清楚。其实，可以这么理解:JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。

// JSON.stringify()//一定要将复杂数据(引用数据类型)转换成JSON字符串

// JSON.parse()// 将JSON字符串转换成对象取出时候使用


        //    🎁     存储复杂数据类型存储
        // 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
        // JSON.stringify(复杂数据类型)  将复杂数据转换成JSON字符串 存储 本地存储中
        // JSON.parse(JSON字符串)  将JSON字符串转换成对象 取出 时候使用
        let obj = [
            {
                name: '彭廷伟',
                age: 23,
                salary: "$40000"
            }
            , {
                name: '刘进强',
                age: 23,
                salary: "$40000"
            }
        ]

        //JSON属性和值都是双引号进行包含

        // 很多人搞不清楚 JSON和JS对象的关系，其至连谁是谁都不清楚。其实，可以这么理解:JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。
        // JSON.stringify()//一定要将复杂数据(引用数据类型)转换成JSON字符串
        obj = JSON.stringify(obj)
        localStorage.setItem('obj', obj)

        // JSON.parse()// 将JSON字符串转换成对象 取出 时候使用
        console.log(
            JSON.parse(localStorage.getItem('obj'))
        );

sessionStorage

// sessionStorage（了解）

// 1、生命周期为关闭浏览器窗口

// 2、在同一个窗口(页面)下数据可以共享

// 3. 以键值对的形式存储使用

// 4. 用法跟localStorage 基本相同

[JavaScript]windows对象(local,navigeter,history)本地存储(localStorage, sessionStorage)

Window对象

1.BOM(浏览器对象模型)

2. 定时器-延时函数

4.递归实现setinterval

5.JS执行机制

6.local对象

7.navigeter对象

8.history对象

本地存储

localStorage

sessionStorage

网站公告

今日签到

热门文章

最新发布