web三、 window对象，延时器，定时器，时间戳，location对象（地址），本地存储-localStorage，数组去重new Set

一、window对象

window对象是一个全局对象，也可以说是JavaScript中的顶级对象

像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的

所有通过 var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

window对象下的属性和方法调用的时候可以省略window

<body>
    <a href="./10-histroy对象.html">10跳转页面</a>

    <script>
        window.alert(`window自带的对象alert`) //输入语句也是window自带的对象

        //var定义的变量和function函数都是window对象的属性和方法,一般window省略不写
        console.log(name)

        var name = '小红'
        console.log(window.name) //没省略之前的



        function fn() {

            console.log(`函数`)

        }
        window.fn() //没省略之前的
    </script>
</body>

二、延时器

**语法：**setTimeout（回调函数，等待的毫秒数）

setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

清除延时器****clearTimeout(timer-id值)

返回值是一个正整数，表示定时器的****编号（唯一的id值）

<script>
        //延时器
        // setTimeout（函数，毫秒时间）
        //  set开启    clear关闭
        let timeid = setTimeout(() => {
                console.log('延时器执行的倒计时')

            }, 2000)
            // clearTimeout(延时器的id)
        clearTimeout(timeid) //关闭延时器
    </script>

三、定时器

可以每隔指定时间自动重复执行某些代码

setInterval（函数，间隔时间-毫秒单位）

注意：1.函数名字不需要加括号2.定时器返回的是一个id数字

<body>
    <button class="btn1">开启定时器</button>
    <button class="btn2">关闭定时器</button>

    <script>
        let timer = null //定义全局的变量储存定时器的id值

        const btn1 = document.querySelector(".btn1")
        const btn2 = document.querySelector(".btn2")

        btn1.addEventListener('click', function() {
            //setInterval（函数，毫秒为单位时间）
            // 防抖--·开启一个定时器之前，·关掉之前的定时器
            clearInterval(timer)
            timer = setInterval(function() {
                console.log(`间隔执行的定时器`)

            }, 3000)
        })

        btn2.addEventListener('click', function() {
            //clearInterval（定时器的id）
            clearInterval(timer)
        })
    </script>
</body>

三、时间戳

时间戳: 是指1970年01月01日00时00分00秒起至现在的总毫秒数(数字型) ，

算法：

将来的时间戳 -现在的时间戳 = 剩余时间毫秒数

剩余时间毫秒数转换为年月日时分秒就是倒计时时间

转换公式

h = parseInt(总秒数 / 60 / 60 % 24) 计算小时

m = parseInt(总秒数 / 60 % 60) 计算分数

s = parseInt(总秒数 % 60) 计算当前秒数

获取时间戳的三种方式

date.getTime（）
+new Date0 使用较为简单
Date.now（）

 <script>
        // 获取时间戳的三种方式

        /**1获取的是从1970年到现在的时间戳----
         * 小括号里可以写从1970年到指定的某年某月的时间，显示的是国际的时间，
         * 前面加一个+转换为毫秒*/
        const date = new Date()
        const date1 = new Date('2022-2-2 12:00')
        console.log(`从1970年到2022-2-2 12:00`, date1) //获得的是国际时间
        console.log(+new Date()) // 获得的是国际时间---前面加+转化为毫秒

        
        console.log(`日期对象来调用`, date.getTime()) //2日期对象来调用


        Date.now() //3 获取的是当前的时间
    </script>

四、location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分，它是一个对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--提交表单跳转  -->
    <form action="">
        <input type="text" name="username">
        <input type="text" name="userage">
        <button>提交</button>
    </form>

    <a href="#/music">音乐</a>

    <button class="btn">刷新</button>

    <script>
        //location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象
        // 常用属性和方法：

        console.log(location)

        // //跳转地址 location.href 
        // location.href = 'http://www.baidu.com' //百度的地址,自动跳的

        const form = document.querySelector('form')

        //表单点按钮可以触发提交事件→submit
        form.addEventListener('submit', function(e) {

            //拿路径中？后面的--查询参数location.search
            console.log('URL' + location.search)
                //  e.preventDefault() //事件对象中的阻止默认行为
        })

        const a = document.querySelector('a')
        a.addEventListener('click', function() {
            // 获取#后面  Location.hash
            console.log(location.hash)

        })


        //  用来刷新当前页面reload( )
        const btn = document.querySelector('.btn')
        btn.addEventListener('click', function() {
            location.reload()
        })
    </script>
</body>

</html>

五、navigator对象（了解即可）

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

常用属性和方法：

通过 userAgent 检测浏览器的版本及平台

六、histroy对象（了解即可）

history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等

history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。

<!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>histroy对象</title>
</head>

<body>
    <button class="back">←后退</button>
    <button class="forward">前进→</button>
    <script>
        const back = document.querySelector("back")
        back.addEventListener('click', function() {
            // history (历史)是对象，主要管理历史记录，
            //history.back() //可以后退功能
            // forward()前进功能,
            history.go(-1) //前进后退功能参数如果是1前进1个页面如果是-1后退1个页面
        })
    </script>
</body>

</html>

七、存储-localStorage（重点）

本地存储：作用：数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失，

键值对的形式存储，本地只能存储字符串,无法存储复杂数据类型

存储数据：localStorage.setltem(key, value)

读取数据：localStorage.getltem(key)

删除数据：localStorage.removeltem(key)

1、基础数据类型的存取

<body>
    <script>
        //存储数据
        // setItem(自定义的key名，存储的数据)
        localStorage.setItem('name', '小红')
        localStorage.setItem('name', '小李')
            // 获取数据
            // getItem(需要获取的数据的key名)
        let num = localStorage.getItem('name')
        console.log(num) //小李，同名储存数据，会覆盖

        // 删除数据
        // localStorage.removeItem('name')
    </script>
</body>

2、复杂数据类型的存取

存储复杂数据类型：

**本地只能存储字符串，无法存储复杂数据类型，要将复杂数据类型转换成JSON字符串，在存储到本地。**语法：JSON.stringify(复杂数据类型)

属性名使用双引号引起来，不能单引号，属性值如果是字符串型也必须双引号

读取复杂数据类型：

因为本地存储里面取出来的是字符串，不是对象，无法直接使用

**所以要把取出来的字符串****转换为对象。**语法：JSON.parse(JSON字符串）

 <script>
        // 1．基本类型－ 直接写数据存储
        // 2，复杂类型
        //存：先JSON.stringify转成JSON格式的字符串
        // 取： JsON.parse 转回原有复杂类型
        const pig = {
                name: '佩奇',
                age: 5
            }
            //存储复杂类型的数据先转成JSON格式的字符串---"name"：“佩奇”--格式的字符串的引号都是双引号
            // console.log(JsoN.stringify(pig))
        localStorage.setItem('zhu', pig)
        console.log(localStorage.getItem('zhu')) //object

        console.log('zhu', JSON.stringify(pig))

        // 想要用对象转换 JSON.parse把json格式的字符串转回复杂类型

        const newObj = JSON.parse(localStorage.getItem('zhu'))
        console.log(newObj)
    </script>

八、存储sessionStorage（了解)

用法跟localStorage 基本相同

区别是：当页面浏览器被关闭时，存储在sessionStorage的数据会被清除

存储：sessionStorage.setltem(key,value)

获取：sessionStorage.getltem(key)

删除：sessionStorage.removeltem(key)

九、数组去重new Set(数组)

 <script>
        // 不允许包含重复元素
        // const s = new Set()

        // s.add(1)
        // s.add(10)
        // s.add(100)
        // s.add(10)

        // s.delete(100)


        // console.log(s)

        const arr = [10, 20, 30, 40, 50, 20, ]
            // 数组去重，转集合{}--→再转回数组（...展开运算）
        let s = new Set(arr)
        console.log(s)
            // console.log([...new Set(arr)])
        console.log([...s])
    </script>

十、案例

1.（距离xx时间的倒计时）

<body>
    <div class="countdown">
        <p class="next">今天是2024年11月25日</p>
        <p class="title">下班倒计时</p>
        <p class="clock">
            <span id="hour">00</span>
            <i>:</i>
            <span id="minutes">25</span>
            <i>:</i>
            <span id="second">20</span>
        </p>
        <p class="tips">18:30:00下课</p>
    </div>
    <script>
        // 倒计时案例 当前距离  2023年1月28日 18:30 还剩多少时间

        //  转换公式
        //  h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
        //  m = parseInt(总秒数 / 60 % 60)        //   计算分数
        //  s = parseInt(总秒数 % 60)             //   计算当前秒数
        // ---------------------------------------------------------
        //晚上6:30的时间戳－现在的时间戳剩的毫秒数转时分秒  

        // 思路：每隔一秒执行一次，代码放到setInterval里面
        //未来时间－现在时间     →转秒数→转时分秒→写入到html页面
        function fn() {
            let end = +new Date('2024-11-25 18:00:00') //结束时间
            let now = Date.now() //现在的时间
            let res = (end - now) / 1000


            h = parseInt(res / 60 / 60 % 24)
            h = h < 10 ? '0' + h : h
            m = parseInt(res / 60 % 60)
            m = m < 10 ? '0' + m : m
            s = parseInt(res % 60)
            s = s < 10 ? '0' + s : s

            document.querySelector('#hour').innerHTML = h
            document.querySelector('#minutes').innerHTML = m
            document.querySelector('#second').innerHTML = s
        }
        fn()
        setInterval(fn, 1000)
    </script>

2.bilibili搜索页面（本地储存）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfonts/iconfont.css">
    <link rel="stylesheet" href="./css/search.css">
</head>

<body>
    <div class="m-search">
        <div class="form">
            <i class="iconfont icon-search"></i>
            <input type="text" placeholder="凡人修仙传" class="search-input">
            <i class="iconfont icon-guanbi"></i>
        </div>
        <a href="javascript:void(0);" class="cancel">取消</a>
    </div>
    <div class="search-hot">
        <h2>大家都在搜</h2>
        <div class="list">
            <span class="hotword-item">开学前一天的中国速度</span>
            <span class="hotword-item">LOL新英雄大招全图范围</span>
            <span class="hotword-item">央视曝光飙车炸街产业链</span>
        </div>
    </div>
    <div class="gap"></div>
    <div class="history">
        <h2>历史搜索</h2>
        <ul>
            <!-- 
        <li>
          <i class="iconfont icon-lishijilu_o"></i>
          <span>凡人修仙传</span>
        </li>
      -->
        </ul>
        <div class="clear-history">
            <a href="javascript:void(0);" class="clear">清除历史记录</a>
        </div>
    </div>

    <!-- 搜索列表展示 -->
    <ul class="recommend-list hide">
        <li class="list-item">xxxx</li>
    </ul>

    <script>
        // /用户回车发布历史记录--页面添加1i标签
        //准备一个数组，用户回车往数组里面新增数据，根据数组数据的个数渲染li标签
        // let arr = ["a", "b"]

        // JSON.parse

        let arr = JSON.parse(localStorage.getItem('history')) || []

        //渲染的功能用户回车就要使用→封装一个函数→有参数（数组数据是可变的，将来数据变，li标签也要变）
        function render(data = []) {
            let str = data.map(item => {
                return `
                   <li>
                      <i class="iconfont icon-lishijilu_o"></i>
                     <span>${item}</span>
                  </li>
              `
            }).join('')
            document.querySelector('.history ul').innerHTML = str
        }
        render(arr)
            //用户如果按下的是回车键Enter，获取用户输入的数据放到arr（前追加unshift)
        const inp = document.querySelector('.search-input')
        inp.addEventListener('keyup', function(e) {
                if (e.key == 'Enter') {
                    //如果用户输入的是空的或有空格都不能发布
                    if (inp.value.trim() == '') {
                        alert('请输入内容:')
                        return
                    }
                    arr.unshift(inp.value)
                        // 添加完数据后，去重集合
                    arr = [...new Set(arr)]
                        // 去重之后，存储到localstorage
                    localStorage.setItem('history', JSON.stringify(arr))
                    render(arr)
                    inp.value = ''
                }
            })
            // 清除内容
            // 清空－localstorage要清除--保证刷新的不能是旧数据；本地js中的arr也要清除，这次渲染的是arr是空的
        const clear = document.querySelector('.clear-history a')
        clear.addEventListener('click', function() {
            arr = []
            localStorage.removeItem('history')
            render(arr)
        })

        // 使用localstorage流程：默认数据提取本地存储localstorage→使用→如果js中数据变化了，就要往本地存储localstorage里面存一次
        // 如果涉及到清空→localstorage里面的要清空；js中的数据也要清空
    </script>


</body>

</html>