一篇文章彻底学会 BOM
// window.fn();
//关于 this
//函数内部的 this 是 window
//方法内部的 this，指向当前的对象
//构造函数内部的 this，新创建的对象
//事件里面的 this，当前对象
// function fn() {
// console.log(this);
// }
//
// window.fn();
var num = 11;
function fn() {
var num = 22;
console.log(num);//22
this.num = 33;//window.num = 33;
console.log(num);//22
}
fn();
console.log(num);//33
</script>
</body>
</html>
[](()1.wi 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 ndow.onload（掌握）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//作用：等待页面加载完成后，才会开始执行。会等待页面所有的资源都加载完成，才会执行。
// window.onload = function () {
// var box = document.querySelector("#box");
// console.log(box);
// }
</script>
</head>
<body>
<div id="box"></div>
<img id="img" src="15.jpg" alt="">
<script>
//on:当..时候 load:加载
//加载完成的时候，会触发这个 onload 事件
// window.onload = function () {
// console.log("哈哈");
// }
//等页面加载完成，所有的资源都加载完成
window.onload = function () {
var img = document.querySelector("#img");
console.log(img.width);
console.log(img.height);
}
</script>
</body>
</html>
[](()2.window.open 与 window.close(了解)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>打开</button>
<button>关闭</button>
<script>
//window.open:开启一个新的窗口
//window.close:关闭一个窗口
var button1 = document.querySelectorAll("button")[0];
var button2 = document.querySelectorAll("button")[1];
var newWin;
button1.onclick = function () {
//打开一个新的窗口
//参数 1：新窗口载入的地址。
newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");
}
button2.onclick = function () {
newWin.close();
}
</script>
</body>
</html>
[](()三、延时器与定时器
[](()1.setTimeout
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>开启</button>
<button>关闭</button>
<script>
var btn1 = document.querySelectorAll("button")[0];
var btn2 = document.querySelectorAll("button")[1];
var timeId;
btn1.onclick = function () {
//设置了延时器，能让一个函数延迟一段时间才执行。
//第一个参数：函数的名字
//第二个参数：延迟的时间,单位毫秒
//返回一个唯一的 number 类型的数值，定时器的 id
timeId = setTimeout(function() {
console.log("boom shakalaka")
}, 5000);
console.log(timeId)
}
btn2.onclick = function () {
//清除延时器
clearTimeout(timeId);
}
</script>
</body>
</html>
[](()2.setInterval
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>开启</button>
<button>关闭</button>
<script>
var btn1 = document.querySelectorAll("button")[0];
var btn2 = document.querySelectorAll("button")[1];
var timeId;
btn1.onclick = function () {
//开启定时器
//参数 1：需要重复执行的函数
//参数 2；间隔的事件
//返回值：定时器的 id
timeId = setInterval(function(){
console.log("我没病，我真的没病");
}, 1000);
}
btn2.onclick = function () {
//清除定时器
console.log("吃药了")
clearInterval(timeId);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 400px;
height: 50px;
background-color: #acffc2;
border: 5px solid black;
margin: 100px auto;
font: bold 24px/50px 楷体;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//把时间显示到 box 中
var box = document.querySelector("#box");
function setTime() {
var date = new Date();
box.innerText = date.toLocaleString();
}
setTime();//手动调用一次
setInterval(setTime, 1000);
//倒计时案例
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//开启了一个定时器，每秒中执行一次 function
var timeId = setInterval(function () {
console.log("1111");
}, 1000);
</script>
</body>
</html>
[](()四、location 对象
location 对象也是 window 的一个属性，location 其实对应的就是浏览器中的地址栏。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
还未添加个人签名 2022.04.13 加入
还未添加个人简介
评论