【JavaScript】10-js操作bom

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);
}