浏览器对象BOM

Posted qianqian-it

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器对象BOM相关的知识,希望对你有一定的参考价值。

一  window对象的属性和方法

      1.window对象是浏览器窗口对文档提供的一个现实的容器

      2 window的属性和方法:window.属性 和window.方法  (可省略window对象)

      3 对话框  (BOM中的三种对话框)

   1.alert()   显示一段消息和一个带有确认按钮的警告框 ,//消息即为括号内的内容

        2 .confirm()   显示一段用户输入消息的对话框,返回值为布尔值 //显示的消息为用户在括号内写              的内容   

        1.确认框通常用于验证是否接受用户操作。

        2.当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。

        3.当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。

        3. prompt()   显示可提示用户输入的对话框,第一个参数是提示,第二个参数是默认值 

        1.提示框经常用于提示用户在进入页面前输入某个值。

        2.当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

        3.如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

<script type="text/javascript">
    document.write("第一种对话框alert"+‘<br/>‘)
    alert("我是alert对话框");
    document.write(‘<br/>‘+‘<hr/>‘)
    document.write("第二种对话框confirm"+‘<br/>‘)
    confirm("确认提交")
    document.write(‘<br/>‘+‘<hr/>‘)
    document.write("第三种对话框prompt"+‘<br/>‘)
    var year=prompt("请输入","你好")//两个参数,第一个位提示信息,第二个为输入框中的默认值
    document.write(‘<br/>‘+‘<hr/>‘)
</script>

//小案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击计算圆面积按钮弹出相对应的输入对话框</title>
<script type="text/javascript">
window.onload=function(){
var but1=document.getElementById("but")
but1.onclick=function(){
var r=prompt("请输入圆的半径");
if(r==""){
alert("请输入数值");
}
else if(isNaN(r)){
alert("输入的数非数值")
}
else {
confirm(r*r*Math.PI)
}
}
}

</script>
</head>
<body>
<input type="button" name="" value="计算圆面积" id="but">
</body>
</html>

 

 4.窗体控制

              1.open()   打开一个新的浏览器窗口或者查找一个已命名的窗口

           1  url :新窗口路径

           2 新窗口的名称

           3  窗口属性   

           width:新建窗口的宽度

           height:新建窗口的高度

           top:左上角垂直坐标

             left:左上角水平坐标

    2  close ()  关闭浏览器窗口

 

<body>
<input type="button" value=" open新窗口" onclick="openWin()"> <br>
<input type="button" value="close新窗口" onclick="closeWin()"> <br>
<input type="button" value="moveTo新窗口" onclick="moveWin1()"> <br>
<input type="button" value="moveBy新窗口" onclick="moveWin2()"> <br>
<input type="button" value="sizeBy新窗口" onclick="sizeWin1()"> <br>
<input type="button" value="moveTo新窗口" onclick="sizeWin2()"> <br>
    <script>
    // 打开和关闭窗口练习
    var newWindow;
    function openWin(){
        newWindow=window.open(‘‘,‘‘,‘top=150,left=150,width=300,height=300‘)
    }
  //第一个参数若为指定的url如(www.baidu.com)则moveTo moveBy resizeBy resizeTo没有效果,(只有当没有值时,各个功能才能实现)
  结果:打开一个长为300,宽为300,左上角坐标为(150,150)的窗口
function closeWin(){ newWindow.close() //关闭窗口 } function moveWin1(){ newWindow.moveTo(300,300) //移动到这里即为(300,300) newWindow.focus() //获得焦点 } function moveWin2(){ newWindow.moveBy(30,30)//相对于之前点再移动 newWindow.focus() } function sizeWin1(){ newWindow.resizeBy(30,30)//把窗口大小增加或减小指定的宽度和高度 newWindow.focus() } function sizeWin2(){ newWindow.resizeTo(30,30)//把窗口大小调整为指定的宽度和高度 newWindow.focus() } </script> </body>

 

 4. 定时器

   1.setInterval(function ,millisecond)   按照指定周期(毫秒数)来调用函数或计算表达式

   2 clearInterval()清除计时器

   3 setTimeout(function,milliseconds)    按照指定时间后调用函数

   4 clearTimeout    清除定时器

               1.用setInterval()写图片轮播

<body>
    <p>请点击一下图片</p>
    <div class="div1" onclick="autoplay()">
        <img src="image/10.jpg"  id="pic">
    </div>
    <script>
    var imageArr=["image/9.png","image/7.jpg","image/11.jpg","image/15.png","image/10.jpg"]
    var i=0;
    function autoplay(){
        setInterval(cycle,2000);
    }
    function cycle(){
        i++;
        if(i==imageArr.length) i=0;
        document.getElementById("pic").src=imageArr[i];
    }   
    </script>
    
</body>

 

                   2 使用setTimeout写图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播效果(使用setTimeout实现)</title>
    <style>
    #div1{
        width:320px;
        height: 320px;
        margin:0 auto;
        background: url(image/9.png);
    }
    
    </style>
</head>
<body>
    <div id="div1">
     
    </div>
    <script>
    var div1=document.getElementById("div1");
    var imageArr=["url(image/7.jpg)","url(image/10.jpg)","url(image/11.jpg)"]
   
    div1.onclick=fun1;
    function fun1(){
        div1.style.backgroundImage="url(image/7.jpg)";
        setTimeout(‘fun2()‘,1000)
    
    }
       function fun2(){
        div1.style.backgroundImage="url(image/10.jpg)";
        setTimeout(‘fun3()‘,1000)
    
    }
       function fun3(){
        div1.style.backgroundImage="url(image/11.jpg)";
        setTimeout(‘fun1()‘,1000)
    
    }
 
    </script>
</body>
</html>

 5   Window 对象属性

    1 innerHeight  :返回窗口文档显示区的高度  

    2 innerWidth:返回窗口文档显示区的宽度

二   History 对象的常用方法

  1.back() 加载history 列表中的前一个URL

        2 forword()  加载history列表中的下一个URL

        3 go() 加载history列表中的某个具体页面

三 Screen 对象

  • availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
  • availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
  • height 返回显示屏幕的高度。
  • width 返回显示器屏幕的宽度。
  • bufferDepth 设置或返回调色板的比特深度

 

 

      

 

 

  

 

   

 


































以上是关于浏览器对象BOM的主要内容,如果未能解决你的问题,请参考以下文章

前端入门06——BOM与DOM

BOM DOM

55-前端-JavaScript

前端随心记---------Javascript系列(第八节.BOM)

JavaScript操作Bom对象

前端知识-JavaScript