浏览器对象模型BOM
window对象
1. alert('') 弹窗 单引号里面写弹窗内容
<button onclick="alert('浩哥来了')">alert</button>
//onclick事件一发生 就会弹窗 弹窗内容为 浩哥来了
2. confirm('')对话框 提示框
单引号里面写确认删除吗之类的确认 有返回值是布尔类型
点确认返回的是true 取消返回的是false
<button onclick="del()">删除</button>
function del(){
let t = confirm('你确定删除嘛');
if(t){
alert('联系人已删除')
}else{
alert('你后悔了');
}
3. open()与close()方法
<button onclick="openBd()">打开百度</button>
<button onclick="closeBd()">关闭百度</button>
let bd
function openBd(){
//打开窗口
bd = open('https://www.baidu.com');
//将新打开的窗口对象赋值给bd
}
function closeBd(){
//关闭窗口
bd.close();
}
4. setTimeout(,) 延时执行 两个参数
1.要执行的函数名不要带() 2.延迟时间 毫秒单位 1秒=1000毫秒
<button onclick="timeout()">三秒后打开百度</button>
function timeout(){
//延时执行 两个参数 1.要执行的函数名不要带() 2.延迟时间 毫秒单位 1秒=1000毫秒
setTimeout(openBd,3000);//意为三秒后执行openBd方法
}
5.setInterval(show,1000) 定时方法 每隔一段时间执行一次
1.要执行的函数名不要带() 2.相隔时间 毫秒单位 1秒=1000毫秒
<button onclick="clock()">时钟</button>
function show(){
let d = new Date();
let hours = d.getHours();
let min = d.getMinutes();
let sec = d.getSeconds();
console.log(hours+':'+min+':'+sec);
}
function clock(){
//setInterval() 定时方法 每隔一段时间执行一次
setInterval(show,1000);
}
location对象
location用于获取或设置地址,并且提供若干方法用于刷新或跳转等。
<button onclick="re()">刷新</button>
<button onclick="forword()">跳转</button>
function re(){
//location 地址 reload是他的方法 意为刷新
location.reload();
}
function forword(){
//href 超链接属性
location.href = 'https://www.163.com';//跳转到网易网页
}
history对象
history对象记录了用户曾经浏览过的页面,并可以实现浏览器前进与后退相似导航的功能。
history.back()表示后退
history.forward()表示前进
history.go(值) 值为0当前页 值为-1为前一页 值为1后一页
<a href="javascript:history.go(1)">前进</a>
返回上一页面
<button onclick="back()">上一步</button>
function back(){
history.go(-1);//-1意为返回上一级
}
需要在另外一个HTML文件里保存历史
<a href="history及location对象.html">历史对象</a>