zoukankan      html  css  js  c++  java
  • 小强的HTML5移动开发之路(32)—— JavaScript回顾7

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

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

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

    (1)open方法:(名字,特性,高度宽度,工具栏,滚动条)

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

    <html>
    	<head>
    		<script>
    			function f1(){
    			//win指向了新打开的窗口 
    			        var win = window.open('day05_03','wi_1',
    					'width=400,height=400');
    			    	setTimeout(function(){
    					win.close();
    			 	}, 5000);		
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="click me" onclick="f1();"/>
    	</body>
    </html> 
    (3)setInterval方法

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

    (4)clearInterval方法

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

    <html>
    	<head>
    		<style>
    			#d1{
    				80px;
    				height:80px;
    				background-color:blue;
    				position:relative;
    			}
    		</style>
    		<script src="myjs.js"></script>
    		<script>
    			function f2(){
    				var v1 = parseInt($('d1').style.left);
    				$('d1').style.left = v1 + 50 + 'px';
    			}
    			function f1(){
    				var taskId = setInterval(f2, 500);
    				setTimeout(function(){
    					clearInterval(taskId);
    				},5000)
    			}
    		</script>
    	</head>
    	<body>
    		<div id="d1" style="left:10px;"></div>
    		<input type="button" value="click me"
    		onclick="f1();"/>
    	</body>
    </html> 
    (5)alert()方法    弹出一个警告对话框

    (6)confirm()方法

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

    (7)prompt方法

    var info = prompt(string)

    <html>
    	<head>
    		<script>
    			function f3(){
    				var flag = confirm('你喜欢钱吗?');
    				alert(flag);
    			}
    			function f4(){
    				var info = prompt('请输入手机号');
    				alert('你输入的手机号是:' + info);
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="click me"
    		onclick="f4();"/>
    	</body>
    </html> 
    2、Document对象:代表整个文档的根

    getElementById(id);
    createElement(tagName);

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

    <html>
     	<!-- document对象 -->
    	<head></head>
    	<body style="font-size:30px;">
    		开始输出helloword<br/>
    		<script>
    			for(i=0; i<100; i++){
    				document.write('hello world<br/>');
    			}
    		</script>
    	</body>
    </html> 
    3,Location对象:封装了浏览器地址栏的相关信息
    href属性:指定要加载的页面
    reload方法:重新加载当前页面,相当于刷新

    <html>
    	<!-- location对象 -->
    	<head></head>
    	<body>
    		<input type="button" 
    		value="跳转到另外一个页面" onclick="location.href = 'day05_04.html';"/><br/>
    		<input type="button"
    		value="刷新当前页面" onclick="location.reload();"/>
    	</body>
    </html>
    4,History对象:封装了浏览器已经访问过的页面的相关信息
    back():后退
    forward():前进
    go(参数):正数前进,负数后退
    <html>
     	<!-- history对象	 -->
    	<head></head>
    	<body>
    		<input type="button"
    		value="点这里后退" onclick="history.back();"/>
    		<input type="button"
    		value="点这里前进" onclick="history.forward();"/>
    		<input type="button"
    		value="点这儿后退"  onclick="history.go(-1);"/>
    	</body>
    </html>
    5,Navigator对象:封装了浏览器的相关信息,(比如:类型,版本)

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

    <html>
    	<!--检测浏览器类型-->
    	<head>
    		<script>
    			function f1(){
    				if((navigator.userAgent).indexOf('Firefox')>0){
    					alert("当前浏览器是Firefox");
    				}else if(navigator.userAgent.indexOf('MSIE')>0){
    					alert("当前浏览器是IE");
    				}else{
    					alert("其他浏览器");
    				}
    			}	
    		</script>
    	</head>
    	<body>
    		<input type="button"
    		value="获得当前浏览器的类型" onclick="f1();"/>
    	</body>
    </html> 
    6,Screen对象:浏览器所在的屏幕的相关信息

    <html>
    	<head>
    		<script>
    			function f2(){
    				alert(screen.width + ' ' +
    				screen.height);
    			}	
    		</script>
    	</head>
    	<body>
    		<input type="button"
    		value="获得screen相关信息" onclick="f2();"/>
    	</body>
    </html> 





  • 相关阅读:
    selenium模块---操作浏览器
    mock模块学习---模拟接口返回数据
    fiddler配置和使用
    css 08-CSS属性:定位属性
    css 07-浮动
    css 06-CSS盒模型详解
    css 05-CSS样式表的继承性和层叠性
    css 04-CSS选择器:伪类
    css 03-CSS样式表和选择器
    css 02-CSS属性:背景属性
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6469276.html
Copyright © 2011-2022 走看看