10-js操作bom
bom-Browser Object Model(浏览器对象模型)
bom的顶级对象是window对象
1.history子对象
//可以通过打印history对象确定history有哪些属性和方法
console.log(window.history);
//前进函数
function my_forward() {
window.history.forward();//相当于浏览器自带的前进按钮
}
//后退函数
function my_back() {
window.histroy.back();//相当于浏览器自带的后退按钮
}
//通过go()函数也可以实现
function my_forward() {
window.history.go(1);//正数代表前进一个页面,负数代表后退一个页面
}
2.location子对象
//重新加载函数
function my_reload() {
window.location.reload();//刷新本页面
}
//跳转页面函数
function set_href(url) {
window.location.href = url;
}
3.window对象自带的函数
//打开提示框函数
function open_prompt() {
let result = window.prompt("请输入用户名:");
console.log(result);
}
//打开警告框函数
function open_alert() {
window.alert("这是一条警告!");
}
//打开确认框函数
function open_confirm() {
let result = window.confirm("王子玉是女生吗?");
console.log(result);//确定是true,取消是false;
}
//打开新窗口函数
function open_window() {
window.open("history_demo.html", "这是新窗口", "width=300px,height=300px,left=100px,top=100px,scrollbars=0");
}
//关闭窗口的函数
function my_close() {
window.close();
}
4.window对象的两个定时函数
//设置定时任务
window.setTimeout(function() {
console.log("定时任务执行了!")
}, 3000);
//定时函数执行时只填写函数名传不了参数
window.setTimeout(open_window, 5000);
//推荐使用的写法
window.setTimeout(function() {
open_window();
}, 5000);
//设置周期任务
let i = 1;
let interval_name = window.setInterval(function() {
console.log(`周期任务执行${i++}次`);
},1000);//这里设置名字是为了方便关闭
//关闭周期任务
function close_interval() {
window.clearInterval(interval_name);
interval_name = null;
}
//开启周期任务
function open_interval() {
if(interval_name == null) {//防止用户多次点击
interval_name = window.setInterval(function() {
console.log(`周期任务执行${i++}次!`)
},1000);
}