现在的位置: 首页 > 综合 > 正文

JavaScript回顾(7)

2018年05月20日 ⁄ 综合 ⁄ 共 4641字 ⁄ 字号 小 中 大 ⁄ 评论关闭

BOM模型brower object model(浏览器对象模型)，通过浏览器内置的一些对象可以操作浏览器本身。
DOM是用来操作页面的，BOM是用来操作浏览器本身的。

BOM是没有规范的，但是大部分浏览器都支持如下几个对象

1、Window对象：表示整个窗口

（1）open方法：（名字，特性，高度宽度，工具栏，滚动条）

（2）setTimeout方法：setTimeout(fn, 毫秒);    //第一个参数必须是一个函数名（不能加括号）

  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function f1(){  
  5.             //win指向了新打开的窗口   
  6.                     var win = window.open('http://www.baidu.com','wi_1',  
  7.                     'width=400,height=400');  
  8.                     setTimeout(function(){  
  9.                     win.close();  
  10.                 }, 5000);         
  11.             }  
  12.         </script>  
  13.     </head>  
  14.     <body>  
  15.         <input type="button" value="click me" onclick="f1();"/>  
  16.     </body>  
  17. </html>   

（3）setInterval方法

var taskId = setInterval(fn, 毫秒);    //在指定的时间间隔后执行某个函数

（4）clearInterval方法

clearInterval(taskId);           //取消setInterval的任务

  1. <html>  
  2.     <head>  
  3.         <style>  
  4.             #d1{  
  5.                 width:80px;  
  6.                 height:80px;  
  7.                 background-color:blue;  
  8.                 position:relative;  
  9.             }  
  10.         </style>   
  11.         <script>  
  12.             function f2(){  
  13. var obj = document.getElementById("d1");
  14.                 var v1 = parseInt(obj.style.left);  
  15.                 obj.style.left = v1 + 50 + 'px';  
  16.             }  
  17.             function f1(){  
  18.                 var taskId = setInterval(f2, 500);  
  19.                 setTimeout(function(){  
  20.                     clearInterval(taskId);  
  21.                 },5000)  
  22.             }  
  23.         </script>  
  24.     </head>  
  25.     <body>  
  26.         <div id="d1" style="left:10px;"></div>  
  27.         <input type="button" value="click me"  
  28.         onclick="f1();"/>  
  29.     </body>  
  30. </html>   

（5）alert()方法    弹出一个警告对话框

（6）confirm()方法

var flag = confirm(string); //string为提示信息、flag是返回true或false

（7）prompt方法

var info = prompt(string)

  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function f3(){  
  5.                 var flag = confirm('你喜欢钱吗？');  
  6.                 alert(flag);  
  7.             }  
  8.             function f4(){  
  9.                 var info = prompt('请输入手机号');  
  10.                 alert('你输入的手机号是：' + info);  
  11.             }  
  12.         </script>  
  13.     </head>  
  14.     <body>  
  15.         <input type="button" value="click me"  
  16.         onclick="f4();"/>  
  17.     </body>  
  18. </html>   

2、Document对象：代表整个文档的根

getElementById(id);
createElement(tagName);

write(string); 在指定的位置输出相关信息

  1. <html>  
  2.     <!-- document对象 -->  
  3.     <head></head>  
  4.     <body style="font-size:30px;">  
  5.         开始输出helloword<br/>  
  6.         <script>  
  7.             for(i=0; i<100; i++){  
  8.                 document.write('hello world<br/>');  
  9.             }  
  10.         </script>  
  11.     </body>  
  12. </html>   

3,Location对象：封装了浏览器地址栏的相关信息
href属性：指定要加载的页面
reload方法：重新加载当前页面，相当于刷新

  1. <html>  
  2.     <!-- location对象 -->  
  3.     <head></head>  
  4.     <body>  
  5.         <input type="button"   
  6.         value="跳转到另外一个页面" onclick="location.href = 'day05_04.html';"/><br/>  
  7.         <input type="button"  
  8.         value="刷新当前页面" onclick="location.reload();"/>  
  9.     </body>  
  10. </html>  

4,History对象：封装了浏览器已经访问过的页面的相关信息
back():后退
forward():前进
go(参数):正数前进，负数后退

  1. <html>  
  2.     <!-- history对象    -->  
  3.     <head></head>  
  4.     <body>  
  5.         <input type="button"  
  6.         value="点这里后退" onclick="history.back();"/>  
  7.         <input type="button"  
  8.         value="点这里前进" onclick="history.forward();"/>  
  9.         <input type="button"  
  10.         value="点这儿后退"  onclick="history.go(-1);"/>  
  11.     </body>  
  12. </html>  

5,Navigator对象：封装了浏览器的相关信息，(比如：类型，版本)

  1. <html>  
  2.     <!--navigator对象-->  
  3.     <head></head>  
  4.     <body>  
  5.         现在访问的浏览器的相关信息如下：<br/>  
  6.         <script>  
  7.         var info;  
  8.         //for in循环：主要用于遍历对象   
  9.             for(propName in navigator){  //propName是任意变量  
  10.         // 将navigator对象的属性名保存到propName变量里  
  11.                 info += propName + ';' +navigator[propName] + '<br/>';  
  12.             }  
  13.             document.write(info);  //在当前页面输出  
  14.         </script>  
  15.     </body>  
  16. </html>   


  1. <html>  
  2.     <!--检测浏览器类型-->  
  3.     <head>  
  4.         <script>  
  5.             function f1(){  
  6.                 if((navigator.userAgent).indexOf('Firefox')>0){  
  7.                     alert("当前浏览器是Firefox");  
  8.                 }else if(navigator.userAgent.indexOf('MSIE')>0){  
  9.                     alert("当前浏览器是IE");  
  10.                 }else{  
  11.                     alert("其他浏览器");  
  12.                 }  
  13.             }     
  14.         </script>  
  15.     </head>  
  16.     <body>  
  17.         <input type="button"  
  18.         value="获得当前浏览器的类型" onclick="f1();"/>  
  19.     </body>  
  20. </html>   

6,Screen对象：浏览器所在的屏幕的相关信息

  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function f2(){  
  5.                 alert(screen.width + ' ' +  
  6.                 screen.height);  
  7.             }     
  8.         </script>  
  9.     </head>  
  10.     <body>  
  11.         <input type="button"  
  12.         value="获得screen相关信息" onclick="f2();"/>  
  13.     </body>  
  14. </html>   


返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞