BOM：Browser Object Model
计时器
计时器是异步的，当时机成熟之后才会执行. 计时器会返回一个数字，该数字表示计时器的编号
- setTimeout方法：指定时间到达后运行某个函数
- clearTimeout方法：清除计时器
<button id="btn1">点击开始</button>
<button id="btn2">清除计时器</button>
<script>
var timer1;
btn1.onclick = function() {
//3000毫秒之后，运行指定的函数
timer1 = setTimeout(function() {
console.log("计时完成1");
}, 3000);
console.log("点击事件");
}
btn2.onclick = function() {
clearTimeout(timer1);
}
</script>
- 点击事件不会等到timer1执行完再去执行，是执行完
timer1 = setTimeout这一句后立即执行，console.log("点击事件"); - 获取到的timer1是为了后面的清除操作。
- setTimeout(函数，毫秒数)
如何利用setTimeout实现间隔一个时间多次调用呢？ 方法就是使用回调函数进行递归，代码如下：
<script>
var timer1, num = 0;
var h1 = document.querySelector("h1");
btn1.onclick = function() {
interval(function(){
num++;
h1.innerHTML = num;
}, 300);
}
//核心代码
function interval(callback, duration) {
timer1 = setTimeout(function(){
callback();
interval(callback, duration);
}, duration);
}
btn2.onclick = function() {
clearTimeout(timer1);
}
</script>
- setInterval方法：指定间隔时间到达后运行某个函数
- clearInterval方法：清除计时器
<script>
var timer1, num = 0;
var h1 = document.querySelector("h1");
btn1.onclick = function() {
//会调用多次
timer1 = setInterval(function() {
num++;
h1.innerHTML = num;
}, 3000);
}
btn2.onclick = function() {
clearInterval(timer1);
}
</script>
setTimeout方法 和 setInterval方法 清除的方法也是不一样的。
window对象
自身方法
- open
打开一个新窗口
open("页面路径", "打开目标", "配置")
<button>打开新页面</button>
<iframe name="myframe" src="" frameborder="0"></iframe>
<script>
var w;
document.querySelector("button").onclick = function() {
w = window.open("test2.html", "_self")
}
</script>
- alert
- confirm
- prompt
对象属性
-
document document.write 在当前文档流中写入内容，如果当前文档流不存在，则新开一个文档流。
-
location：地址栏对象
location对象的属性：
href属性：得到目前地址 其他属性参考location.jpg 可以使用location.href = 某个地址，实现跳转。
reload方法：刷新当前页面，也是location的方法。
-
navigator
-
history：历史记录
go方法 back方法 forword方法
- console
log方法：打印对象的valueOf的返回值，如果一个对象重写了valueof方法，那么console.log 和console.dir 打印的结构就不一样了，如果没有重写的话，打印应该是一样的。
dir方法：打印对象结构
tiem方法和timeEnd方法：用于计时
