学习笔记——BOM基础

一、BOM基础

1.打开、关闭窗口
A.open
<script>
window.onload=function()
{
    var oBtn=doucment.getElementById("btn1");
    oBtn.onclick=function(){
        window.open('http://www.sina.com','_blank');   //_blank,self
    }
};
</script>
<input id="btn1" type="button" value="开窗口">

a)蓝色理想运行代码功能

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
    var oTxt=document.getElementById('text1');
    var oBtn=document.getElementById('btn1');
    oBtn.onclick=function(){
        var oNewWin=window.open('about:blank');    
        oNewWin.document.write(oTxt.value);
    };    
};
</script>
</head>

<body>
<textarea id="text1" rows="10" cols="40"></textarea><br />
<input id="btn1" type="button" value="运行" />
</body>
</html>

 

B.close
–关闭时提示问题
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
    var oBtn=document.getElementById("btn1");
    oBtn.onclick=function(){
        window.close();    
    };    
};
</script>
</head>

<body>
<input id="btn1" type="button" value="关闭" />
</body>
</html>

运行代码后IE下会有确认框，chrome下正常，FF下不能关闭。只有用脚本打开的窗口才能关闭。

 
2.常用属性
A.window.navigator.userAgent
告诉你当前浏览器的版本
 
B.window.location
当前页面的网址。可以往里面读或者写东西。写的时候实现页面自动跳转。
 
二、尺寸及坐标
1、窗口尺寸、工作区尺寸
A.可视区尺寸
–document.documentElement.clientWidth
–document.documentElement.clientHeight
 
B.滚动距离
–document.body.scrollTop
document.documentElement.scrollTop
 
三、常用方法和事件
1、系统对话框
A.警告框：alert(“内容”)，没有返回值
B.选择框：confirm(“提问的内容”)，返回boolean
b＝confirm('对还是错');
alert(b);

点确定的时候弹出ture，点取消或关闭的时候返回false。

C.输入框：prompt()，返回字符串或null
var str=prompt('好吗？','好');
alert(str);

弹出在输入框中输入的字符。点取消和关闭按钮弹出false。

 
2.window对象常用事件
A.onload
B.onscroll
C.onresize
a)例子：侧边栏广告
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.div1{width:100px; height:100px; background:red; position:absolute; right:0;}
</style>
<script>
window.onscroll=window.onload=window.onresize=function(){
    oDiv=document.getElementById("div1");
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
    oDiv.style.top=scrollTop+t+'px';
}
</script>
</head>

<body style="height:2000px;">
<div class="div1" id="div1"></div>
</body>
</html>

闪烁问题用运动解决。

b)例子：回到顶部按钮
  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
input{position:fixed; bottom:0; right:0;}

</style>
<script>
window.onload=function(){
    var oDiv=document.getElementById("div1");
    var i=0;
    for(i=0;i<100;i++){
        oDiv.innerHTML+=i+'<br>';    
    }
    var oBtn=document.getElementById("btn1");
    var timer=null;
    var bSys=true;
    //如何检测用户拖动的滚动条
    window.onscroll=function(){
        if(!bSys){
            clearInterval(timer);    
        }
        else{
            bSys=false;    
        }
    };
    
    oBtn.onclick=function(){
        timer=setInterval(function(){
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var iSpeed=Math.floor(-scrollTop/8);
            if(scrollTop==0){
                clearInterval(timer);
            }
            bSys=true;
            document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
        },30);    
    };
};
</script>
</head>

<body>
<input type="button" value="回到顶部" id="btn1" />
<div id="div1">1</div>
</body>
</html>

 

posted @ 2012-10-23 13:20  穹天  阅读(179)  评论(0)  编辑  收藏  举报