javascript基础笔记（十七）之js的bom对象

最新推荐文章于 2024-10-03 20:39:32 发布

bruce_suxin

最新推荐文章于 2024-10-03 20:39:32 发布

阅读量422

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： javascript 前端设计网页设计脚本语言 js的BOM对象

本文链接：https://blog.csdn.net/bruce_suxin/article/details/53121422

版权

HTML+CSS+JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;">js的bom对象
                   **bom : broswer object mode1:浏览器对象模型
		   **有哪些对象？
		   **navigator：获取客户机的信息（浏览器的信息）
		   **screen  
		   //screen对象
		   document.write("<hr/>");
		   document.write("高等于："+screen.width);
		   document.write("<br/>");
		   document.write("宽等于："+screen.height);

		   **location :请求的URL地址、
		         -href属性
			        ***获取到请求的URL地址
				       -document.write(location.href);
			 **设置URL地址
			          --页面上安置一个按钮，按钮上绑定一个事件，当我点击
				  这个按钮页面就可以跳转到另外一个页面
                         ****      <input  type="button" value="tiaozhuan"  οnclick="href1();" />
			       ----鼠标点击事件οnclick=“ 鼠标点击事件（方法）”

		   **history：请求的url历史记录
					--1、创建三个页面a.html 写一个超链接到b.html
					  2、创建b.html超链接到c.html
					  3、创建c.html
                          ----到访问的上一个页面      
                                      history.back();
				      history.go(-1);
				      
                          ----到访问的下一页面
			               history.forward();
		                       history.go(1);
		             
		   **window(重点)
		           *窗口对象
			    *javascript层次级中的 顶层对象所有的bom对象都是在
			        window里面操作)
                            
			    **方法
			          --window.alert();页面弹出一个框
				  --confirm()表示确认框（确认提示框）
                                  --prompt(text,defaultText):输入对话框
                                                         ---输入框现在很少使用了
                                   -- window.prompt("please Input:","0");
				        --window.prompt("显示的内容","输入框里面的默认值");
                            --open(): 表示可以打开一个新的窗口
			           **open("URL","name","fea","");
				   **open("打开的新窗口的地址url","","窗口特征,比如窗口的高度和宽度")
				         --创建一个按钮，点击这个按钮，打开一个新的窗口
					 window.open("实现九九乘法表.html","","width=200,height=100");		 
           
	                            colse()--关闭窗口（浏览器兼容性比较差不好用）
                                                 ---window.close();
						 
  
				 ----做定时器
				 **setInterval("js代码",毫秒数);
					每两秒就执行一次alert方法
				       window.setInterval("alert('123');",2000);
				

				 **setTimeout("js代码",毫秒数)：
				   --表示在毫秒数之后执行，但是只会执行一次
				    window.setTimeout("alert('abc');","4000");

                                
				 **clearintval()：表示清除setInterval设置的定时器
				           var id1=setInterval("alert('123')",2000);//通过setInterval会有一个返回值
				           clearInterval(id1);清除掉它

				 **clearTimeout()：表示清除setTimeout设置的定时器
				            var id2=setTimeout("alert('abc');",4000);
					    clearTimeout(id2);</span>

代码：对照笔记看代码

nivigator

screen

location

history

<!DOCTYPE html >
<html>
 <head>
  <title> js的BOM信息 </title>
 
 </head>
  
 <body>
        <input  type="button" value="tiaozhuan"  οnclick="href1();" />
        <script type="text/javascript">
            //href
			function href1(){
			     //alert("aaaa");
				 location.href="实现九九乘法表.html";//引号里面填地址
			 }

		   //navigator获取浏览器的版本
		   document.write(navigator.appName);          
		   //screen对象
		   document.write("<hr/>");
		   document.write("高等于："+screen.width);
		   document.write("<br/>");
		   document.write("宽等于："+screen.height);
		   //loaction
           document.write("<hr/>");
		   document.write(location.href);
		</script>
 </body>
</html>

以下代码介绍这些方法：

comfirm()

prompt()

open()

close()

<!DOCTYPE html>
<html>
       <head>
          <title> BOM对象2</title>
       </head>
     <body>
	  <input type="button" value="open" οnclick="open1()">
         <script type="text/javascript">
		          //演示confirm
				 /* var flag=window.confirm("是否删除?");
				  //alret(flag);
                  if(flag==true){
				        alert("删除成功！");
				   }else{
				        alert("删除失败！");
				   }
              */
                  
					//window.prompt("please Input:","0");
            
			  //open方法

                function  open1(){
				      window.open("实现九九乘法表.html","","width=200,height=100");
				}

             //close()方法
             //setInterval方法
			 

		 </script>
   </body>
</html>

以下代码介绍这些方法：

setInterval()

setTimeout()

clearInterval()

clearTimeout()

<!DOCTYPE html>
<html>
       <head>
          <title> HTML示例</title>
       </head>
     <body>
	      <input type="button" value="interval" οnclick="clear1();" />
		  <br/>
		  <input type="button" value="timeout"οnclick="clear2();" />
				   <script type="text/javascript">
		          //演示setInterval方法
		            var id1=setInterval("alert('123')",2000);
				   
				   //演示setTimeout方法
				   var id2=setTimeout("alert('abc');",4000);
				   //4秒钟之后执行代码，但是只会执行一次。
            
			    //清除setInterval
		         function clear1(){
				     clearInterval(id1);
				 }
              //清除setTimeout
			    function  clear2(){
				    clearTimeout(id2);
				}
				
				</script>
      </body>
</html>