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

最新推荐文章于 2024-07-31 14:35:30 发布

2401_84412194

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量399

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84412194/article/details/138925597

版权

程序员专栏收录该内容

202 篇文章 1 订阅

订阅专栏

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

    <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
        //利用=把字符串分割为数组


### 最后

全网独播-价值千万金融项目前端架构实战

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi1iMzExOWVhYzM3ZjkyNWE3NjMyNTFkNWE5ZWY5Njc3MF9oZC5qcGc?x-oss-process=image/format,png)



从两道网易面试题-分析JavaScript底层机制

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi0xMGE3MzBlOTc1ZmVjOTFjMDcwOTE1OWIwMTdjNTliMV9oZC5qcGc?x-oss-process=image/format,png)



RESTful架构在Nodejs下的最佳实践

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1hY2UyZjVjNjQ1YjhkMTE1MzA4YzcyZDM1ZGNkZGYzNV9oZC5qcGc?x-oss-process=image/format,png)

一线互联网企业如何初始化项目-做一个自己的vue-cli

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi04MGU5MWQ0NGY3NTUzZTA5OTJhOWEzN2Y2OGFhYTAwNF9oZC5qcGc?x-oss-process=image/format,png)



思维无价，看我用Nodejs实现MVC

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0yZGI4MTZiY2JlODkwNjBiMDY1NWIyODdlM2Y4NWVlM19oZC5qcGc?x-oss-process=image/format,png)



代码优雅的秘诀-用观察者模式深度解耦模块

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi04YTY0YTU3YTdlNDFmZDc3OTRiZWYzNjVkYjNlYzQxMF9oZC5qcGc?x-oss-process=image/format,png)

前端高级实战，如何封装属于自己的JS库

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1lOTdlMTZkMWYyNDZhNjUxZjA4ZThlZjdjZjRhZWRjZl9oZC5qcGc?x-oss-process=image/format,png)

VUE组件库级组件封装-高复用弹窗组件

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi00NWJjMGI2OWU4YzY2YTcxYzBkNWFiNjczZTkzM2MyZF9oZC5qcGc?x-oss-process=image/format,png)

2401_84412194

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习6：BOM（window对象、定时器、js执行机制、location

全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件
复制链接

扫一扫