JavaScript的第十天-优快云博客

        window.document.querySelector("div")

        var a = 5
        console.log(window.a);

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

        window.fn()

        document.body.addEventListener("click", function () {

        })

        window.addEventListener("click", function () {
            console.log(1);
        })

二、windows的常见事件

1、window.onload：延迟加载器

会将js延迟加载，延迟到dom节点，图片，flash，css等加载完之后再执行

load：等页面内容全部加载完毕，包含页面dom元素，图片，flash，css等等

    window.addEventListener("load",function()
    {
        var btn =document.querySelector("button")
        console.log(1);
    )
    //在头部插入script标签时，因为代码的加载顺序问题会导致事件无法进行
    //但是在事件外部套入一个load延迟加载可以使js文件的加载顺序发生改变
    //即完成body的加载后再执行

2、DOMContentLoaded

DOMContentLoaded是DOM 加载完毕，不包含图片、falsh、css、等就可以执行，加载速度比 load更快一些，因为不需要加载图片，flash，css等所以会比window.onload先执行

        window.addEventListener("DOMContentLoaded", function () {
            var btn = document.querySelector("button")
            console.log(2);
        })

3、 window.onresize 和 window.innerWidth

window.onresize是用来监听窗口变化的事件，window.innerWidth是用来做获取浏览器BOM宽度的

        var div = document.querySelector("div")
        window.addEventListener("resize", function () {
            console.log(window.innerWidth);
            if (window.innerWidth < 1000) div.style.display = "none"
            else div.style.display = "block"
        })

三、定时器

1、setTimeout

使用方法：window.setTimeout(调用函数, 延时时间)

        1. 这个window在调用的时候可以省略

        2. 这个延时时间单位是毫秒但是可以省略，如果省略默认的是0

        3. 这个调用函数可以直接写函数还可以写函数名，还有一个写法：'函数名()'

        4. 页面中可能有很多的定时器，我们经常给定时器加标识符（名字)，即用变量并赋值去代替函数

        setTimeout(function () {
            //事件处理程序
          console.log(this);

        }, 时间)

        //this指向window  
        //该定时器只触发一次，触发结束和直接结束，
        //事件处理程序的运行会存在内存中，需要手动清理

        setTimeout(function ()
        {
            console.log(this);
        }, 1000)

定义一个单次使用自动关闭的程序

在下列代码中，使用setTimeout的单次结束即结束特性完成一个3000毫秒定时的程序，在完成定时后将图片的属性设置为none即可完成隐藏。
        var img = document.querySelector("img")
        setTimeout(function () {
            img.style.display = "none"
        }, 3000)

2、setIntval

使用方法：window.setInterval(调用函数, 延时时间);

每隔这个延时时间，就去调用这个回调函数，再没有清除计数器或限制条件的情况下会重复调用这个函数。

        var num = 10
        var timer = setInterval(function () {
            console.log(++num);
        }, 1000)

倒计时效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 200px;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        function getTime(future) {
            var time = +new Date(future)
            var now = +new Date()
            var temp = (time - now) / 1000
            var h = Math.floor(temp / 60 / 60)
            h = h >= 10 ? h : "0" + h
            var m = Math.floor(temp / 60 % 60)
            m = m >= 10 ? m : "0" + m
            var s = Math.floor(temp % 60)
            s = s >= 10 ? s : "0" + s
            return [h, m, s]
        }
        var spans = document.querySelectorAll("span")
        var arr = getTime("2024/10/29")
        for (var i = 0; i < spans.length; i++) {
            spans[i].innerHTML = arr[i]
        }
        setInterval(function () {
            var arr = getTime("2024/10/29")
            for (var i = 0; i < spans.length; i++) {
                spans[i].innerHTML = arr[i]
            }
        }, 1000)
    </script>
</body>

</html

3、清除定时器：clearTimeout（）/ clearInterval（）

使用 “clear+定时器” 的组合来清除定时器，在清除Timeout时会停止计时器的运行。

而在clearInterval中会停止定时器的循环和继续运行，即可以理解为停止一个无限循环。

    btn.onclick = function () {
      clearTimeout(timer)
    }


    stop.addEventListener("click", function () {
       clearInterval(timer)
     })

4、发送短信案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        // 定义剩下的秒数

        var btn = document.querySelector("button")
        var num = 5
        btn.addEventListener("click", function () {
            this.disabled = true
            this.innerHTML = "再过" + num + "秒重新发送短信"
            var timer = setInterval(function () {
                num--
                btn.innerHTML = "再过" + num + "秒重新发送短信"
                if (num == 0) {
                    clearInterval(timer)
                    btn.disabled = false
                    btn.innerHTML = "发送"
                    num = 5;
                }
            }, 1000)
        })

    </script>
</body>

</html>

四、不同的存储方式

1、会话存储：sessionStorage

存储的有效期至当前浏览器会话结束，关闭浏览器标签页或窗口后数据会被清除。

且存储的值必须为字符串型，如果值为对象可以使用JSON转换。

sessionStorage.setItem('name',val)	存储
sessionStorage.getItem('name')	获取
sessionStorage.removeItem('name')	删除
sessionStorage.clear()	清空

        set.onclick = function () {
            console.log(ipt.value);
            var obj = {
                name: "aa",
                age: 18, tel: 13344445555
            }
            if (ipt.value) {
                // JSON.stringify()  对象转字符串
                sessionStorage.setItem("uname", JSON.stringify(obj))
                sessionStorage.setItem("name", ipt.value)
            }
        }

        get.onclick = function () {
            console.log("aa");
            console.log(sessionStorage.getItem("uname"));
                // JSON.parse()    字符串转对象
            console.log(JSON.parse(sessionStorage.getItem("uname")));
        }

2、本地存储：localStorage

数据在本地存储，不会随着浏览器关闭而消失，除非用户主动删除数据，或者通过脚本删除。

localStorage.setItem('name',val)	存储
localStorage.getItem('name')	获取
localStorage.removeItem('name')	删除
localStorage.clear()	清除

        set.addEventListener("click", function () {
            if (ipt.value) {
                localStorage.setItem("uname", ipt.value)
            }
        })
        get.addEventListener("click", function () {
            console.log(localStorage.getItem("uname"));
        })
        remove.addEventListener("click", function () {
            localStorage.removeItem("uname")
        })
        del.addEventListener("click", function () {
            localStorage.clear()
        })

记录用户名案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="username"> 
    <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        // 1.页面加载 判断是否有值
        // 2.点击多选框  存储和移除值
        var ipt = document.querySelector("#username")
        var rem = document.querySelector("#remember")
        console.log(1);
        if (localStorage.getItem("uname")) {
            ipt.value = localStorage.getItem("uname")
            rem.checked = true
        }

        rem.onclick = function () {
            console.log(this.checked);
            if (this.checked) {
                if (ipt.value) {
                    localStorage.setItem("uname", ipt.value)
                }
            } else {
                localStorage.removeItem("uname")
            }
        }

    </script>
</body>