版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34928644/article/details/80879781
BOM中最常用的是window对象，下面是window对象的常用方法以及属性的演示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOM--浏览器对象模型</title>
<script type="text/javascript">
function resizeWindow()
{
window.resizeTo(500,300)
}
</script>
</head>
<body>
<pre>
BOM:把浏览器窗口封装成对象模型，供js进行访问。最重要的一个对象是:window
</pre>
<h3>window中的属性演示</h3>
<script type="text/javascript">
//window.status属性演示
function fun1(){
window.status="湖南城市...";
//window.pageXOffset="200px"; //IE不支持
//window.dialogHeight="200"; //deprecated
alert("aa");
//window.resizeTo(500,400);
//window.resizeBy(-100,-100);
}
function aa(){
alert( "abc..." );
alert( window.innerHeight );
}
</script>
<input type="button" value="window对象中的status属性演示" onclick="fun1();"> <br/>
<input type="button" onclick="aa();" value="文档窗口高度"> <br/>
<a href="aa.html">前进</a>
<hr/>
<input type="button" onclick="locationDemo();" value="window中的location对象属性"> <br/>
<script type="text/javascript">
function locationDemo(){
//alert( window.location.href);
alert( window.location.hostname);
//通过window.location.href属性实现页面跳转
window.location.href="http://www.baidu.com";
}
</script>
<input type="button" onclick="navigatorDemo();" value="window中的Navigator对象属性"> <br/>
<script type="text/javascript">
function navigatorDemo(){
alert( window.navigator.appName);
alert( window.navigator.appVersion);
}
</script>
<script type="text/javascript">
</script>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOM--浏览器对象模型</title>
</script>
</head>
<body>
<h3>window中的方法演示</h3>
<script type="text/javascript">
function fun1(){
window.close();//关闭窗口
}
function fun2(){
var boo = window.confirm("是否真的要做某事?");//消息确认
if(boo){
alert("做某事....");
}else{
alert("不做某事....");
}
}
function fun3(){
window.moveBy(10,10);//经测试，当前浏览器，不支持
}
</script>
<input type="button" value="window对象中的close()方法演示" onclick="fun1();"> <br/>
<input type="button" value="window对象中的confirm()方法演示" onclick="fun2();"> <br/>
<input type="button" value="window对象中的moveBy()方法演示" onclick="fun3();"> <br/><br/><br/>
<!--///////////////以下演示定时器////////////////// -->
<!--这个定时器是一次性的，setTimeout(),clearTimeout()-->
<input type="button" value="启动定时器1" onclick="start1();"> <br/>
<input type="button" value="关闭定时器1" onclick="stop1();"> <br/>
<script type="text/javascript">
var t1; //全局变量
function start1(){
t1 = window.setTimeout("aa();",2000); //返回值为当前闭定时器的id
}
function aa(){
alert("aaa.....");
}
function stop1(){
window.clearTimeout(t1); //指定所关闭定时器的id
}
</script>
<!--这个定时器是周期性的，setInterval(),clearInterval()-->
<input type="button" value="启动定时器2" onclick="start2();"> <br/>
<input type="button" value="关闭定时器2" onclick="stop2();"> <br/>
<script type="text/javascript">
var t2; //全局变量
function start2(){
//t2 = window.setInterval("bb();",2000); //返回值为当前闭定时器的id
t2 = setInterval("bb();",2000); //返回值为当前闭定时器的id
}
function bb(){
//window.alert("bbbbbbb.....");
alert("bbbbbbb.....");
}
function stop2(){
//window.clearInterval(t2); //指定所关闭定时器的id
clearInterval(t2); //指定所关闭定时器的id
}
</script>
<hr/>
<!--打开新窗口: open() -->
<input type="button" value="新开一个窗口" onclick="demo();"> <br/>
<script type="text/javascript">
function demo(){
//window.open(URL,name,features,replace)
window.open("ad.html","ad","height=200,width=300,status=no,location=no");
}
</script>
<input type="button" onclick="disp_prompt()" value="Display a prompt box" /> <br/>
<script type="text/javascript">
function disp_prompt(){
var name=prompt("Please enter your name","")
if (name!=null && name!="")
{
document.write("Hello " + name + "!")
}
}
</script>
<input type="button" onclick="disp_scrollBy()" value="Display scrollBy" /> <br/>
<script type="text/javascript">
function disp_scrollBy(){
scrollBy(10, 10);//模拟用户点击滚动条动作
}
</script>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
<h2>为了演示滚动效果</h2>
</body>
</html>利用BOM做点小花样
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOM--用定时器做个小玩意</title>
<style type="text/css">
div{
background-color:#ff0080;
width:300px;
height:50px;
position:absolute;
}
</style>
</head>
<body>
<script type="text/javascript">
var str="欢迎访问湖南城市学院!";
var t,i=0;
function demo(){
t = setInterval("aa();",500);
}
function aa(){
status = str.substring(0,i+1);
i=(i+1)%(str.length+1);
}
function demo2(){
t = setInterval("bb();",50);
}
function bb(){
//window.document
var objDiv = document.getElementById("d1");
objDiv.style.posTop +=5;
objDiv.style.posLeft +=3;
}
</script>
<input type="button" value="动画演示1" onclick="demo();"> <br/>
<input type="button" value="动画演示2" onclick="demo2();"> <br/>
<div id="d1">今天凉快了....</div>
</body>
</html>BOM事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOM--事件</title>
<style type="text/css">
div{
width:200px;
height:80px;
background-color:#0ff;
}
</style>
<script type="text/javascript">
onload=function(){
alert("页面加载完毕");
};
onunload=function(){
alert("页面马上关闭，赶紧进行数据存储。。。");
//open("bom_4.html"); 这一句会从新打开本页面
}
</script>
</head>
<body>
<script type="text/javascript">
function aa(obj){
alert(obj.value);
}
function bb(){
alert("11111");
}
function cc(obj){
//alert(obj.value.length+1);
var objSpan = document.getElementById("sNum");
objSpan.innerText=obj.value.length+1+"";
//alert("2222");
}
function dd(obj){
//var objDiv = obj;
obj.innerText=window.event.screenX+","+event.screenY;
}
</script>
邮箱:<input type="text" name="email" onblur="aa(this);" onchange="bb();"> <br/>
邮箱2:<input type="text" name="email" onkeydown="cc(this);"> <span id="sNum"></span><br/>
<div onmousemove="dd(this);">
</div>
<input type="button" value="动画演示2" onclick="demo2();"><br/>
</body>
</html>