好程序员web前端培训分享浏览器对象模型，浏览器对象模型（ browser object model )
什么是BOM？
提起BOM就不得不提起JavaScript的构成。ECMAScript为JavaScript的核心，但是要是在浏览器中使用JavaScript，那么BOM才是JavaScript的核心。
通用的的规定就作为事实上的标准。这个标准就是BOM。
2.BOM的对象：
1）location对象：
*window.location.href=""
这是一个取代跳转链接的页面；
这个方法存在的意义是，让咱们的跳转链接可以操作，可以拼接>>>>这是开发中一种常见的传递数据的方式。
*window.location.reload()
刷新页面的方法。一般情况下给reload()传递一个true，让他刷新，并不使用缓存。
缓存的东西一般为js文件，css文件等。
用这个方法可以让自己不能动的页面动起来了。刷新当前页面。
toSource()方法；
只兼容FF浏览器，其他浏览器不兼容。 这个方法可以查看对象的源码；
语法是 obj.toSource()
2）navigator对象：
navigator.appName 返回获取当前浏览器的名称。
navigator.appVersion 返回 获取当前浏览器的版本号。
navigator.platform 返回 当前计算机的操作系统。
以上属性已经在逐渐被抛弃了。
一个新的属性将替代这些属性。
navigator.userAgent 返回
close()方法
注意 ：FF不支持此方法；
alert( )方法>>>这个没啥说的；
confirm( )方法;
confirm("对话框的提示文字")
这个方法有返回值，看到返回值的第一想法就是使用返回值；
var i=confirm("对话框的提示文字");
if(i){
document.write('你确定了')
}else{
document.write('你否定了')
}
prompt()输入框
用法和confirm相同，返回值是你输入的值；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
<script>
window.onload = function() {
function meibumei() {
var i = prompt('请输入我爱凤姐');
if (i == '我爱凤姐') {
document.write('<big><strong>努力吧骚年！！凤姐属于你！！<strong></big>')
} else {
document.write('请好好输入')
meibumei()
}
}
meibumei()
}
</script>k
</html>
3.定时器
setInterval(函数名，执行时间（毫秒）)>>>>
每间隔一定时间，就执行一次函数；
进度条 || 倒计时
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#warp{width: 400px;height: 20px;border: 1px solid #b6b6b6;margin: 100px auto;border-radius: 4px;box-shadow: 0 0 4px #ddd;}
#move{width: 0;height: 20px;background: gray;border-radius: 4px;}
#span1{ display: block; float: left; margin-left: 190px; margin-top: -20px; font-family: '微软雅黑';}
.tip{ width: 200px; height: 40px; line-height: 40px; margin:40px auto; font-size: 30px}
</style>
<script>
window.onload=function(){
var oMove=document.getElementById('move');
var oWarp=document.getElementById('warp')
var num=0;
var timer;
function biankuan(){
if(num>oWarp.offsetWidth-2){
clearInterval(timer)
window.close()
}else{
num++
oMove.style.width=num+'px'
}
document.getElementById('span1').innerHTML=Math.round(num/oWarp.offsetWidth*100)+'%'
}
timer=setInterval(biankuan,30)
}
</script>
</head>
<body>
<div class="tip">窗口即将关闭</div>
<div id='warp'>
<div id="move">
</div>
<span id='span1'></span>
</div>
</body>
</html>
setTimeout(函数名，执行时间（毫秒）)
执行一次
4.一些事件
onload 加载事件网页加载完毕后执行
onscroll 滚动事件
案例：回到顶部
document.documentElement.scrollTop 代表垂直的滚动条，向下滚动的距离
document.body.scrollTop //chrome 代表垂直的滚动条，向下滚动的距离
document.documentElement.scrollLeft
document.body.scrollLeft
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function() {
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.getElementById('div2').innerHTML = scrollTop
}
}
function goBack() {
if (document.body.scrollTop) {
document.body.scrollTop = 0;
} else {
document.documentElement.scrollTop = 0
}
}
</script>
</head>
<style>
#btn,#div2 {position: fixed;width: 80px;height: 80px;bottom: 10px;right: 20px;border: 1px solid #b6b6b6;line-height: 80px; text-align: center;font-family: '微软雅黑';}
#div2 {right: 150px;}
.mark { width: 100%;height: 200px;background: pink;text-align: center;font-size: 50px;font-family: '微软雅黑';color: #fff;line-height: 200px;}
body {height: 1000px;}
</style>
<body>
<div class='mark'>这是顶部</div>
<div id="btn" onclick="goBack()">回到顶部</div>
<div id="div2"></div>
</body>
</html>
好程序员web前端培训官网：http://www.goodprogrammer.org/html5_class.shtml
网友评论