JavaScript学习6：BOM（window对象、定时器、js执行机制、location、navigator、history）

最新推荐文章于 2023-05-17 22:46:33 发布

Vivian小姐

最新推荐文章于 2023-05-17 22:46:33 发布

阅读量162

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_43819274/article/details/114274242

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript学习6：BOM（window对象、定时器、js执行机制、location、navigator、history）

文章目录

- JavaScript学习6：BOM（window对象、定时器、js执行机制、location、navigator、history）

一、BOM概述

在这里插入图片描述

二、window对象的常见事件

在这里插入图片描述

三、定时器

1.window.setTimeout()
在这里插入图片描述

    <script>
        //window.setTimeout(调用函数,[延迟的毫秒数]);
        setTimeout(function () {
            console.log('时间到了');
        }, 2000);

        //第二种写法
        function callback() {
            console.log('爆炸了');
        }
        setTimeout(callback, 3000); //或者setTimeout('callback()'', 3000)
        var time2 = setTimeout(callback, 5000); //经常用变量标识定时器
    </script>

在这里插入图片描述

2.setInterval()
在这里插入图片描述
停止：clearInterval(id)
案例：倒计时

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2021-3-5 18:00:00'); //ddl时间
        //先调用一次
        countDown();
        setInterval(countDown, 1000);
        function countDown(time) {
            var nowTime = +new Date(); //当前时间
            var times = (inputTime - nowTime) / 1000; //剩余总秒数
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;

        }
    </script>
</body>

注意点：button和其他表单元素不同，修改里面的值通过innerHTML而不是value

this的指向：

全局作用域或者普通函数（setTimeout等）中的this指向window
方法调用中谁调用指向谁
构造函数中this指向构造函数的实例

四、JS执行机制

在这里插入图片描述

重点：

异步进程处理会等到click 或时间到了等等才会把异步任务加入到任务队列中

五、location对象

在这里插入图片描述

案例：在不同页面之间传递数据
login.html

<body>
    <form action="index.html">
        用户名 <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

index.html

<body>
    <div></div>
    <script>
        console.log(location.search); //?uname = vivian
        //先去掉? substr(起始的位置,截取几个字符)
        var params = location.search.substr(1); //uname = vivian
        //利用=把字符串分割为数组
        var arr = params.split('=');
        console.log(arr); //["uname", "vivian"]

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