21网页前端javascript ——对象中的方法、BOM相关

一：数组对象中的方法


<script>
	
	var ad=['zhangsan',20,'teacher'];
	alert(ad);
	alert(ad.join('|'));//将数组中的逗号  改成 | 表示
	//-----------------栈方法（先进后出）------------------------------
	alert(ad.push('180cm'));//添加进去
	alert(ad.pop());//弹出来
	//----------------队列方法(先进先出）-----------------------------
	alert(ad.push('man'));
	alert(ad.shift());//出来
	alert(ad.unshift('no'));//在数组的前面插入元素
	//-----------------特殊的方法------------------------------------
	
	var ad1=[3,2,1,5];
	alert(ad1.reverse());//逆向排序方式
	alert(ad1.sort());//按照大小排序
	
	var box=[1,2,3];
	var box2=box.concat('6');//在数组的末尾添加元素并生成新数组
	alert(box2);
	
	var box=['zhangsan',20,'student'];
	var box3=box.slice(1,3);//截取(不包含末尾)
	alert(box3);
	
	
	var box4=['zhangsan',20,'student'];
	var box5=box4.splice(1,0,'180cm','shanghai');//插入
	alert(box5);
	alert(box4);

二： BOM

1：BOMj介绍：

浏览器对象模型，尚无固定标准。

2：window对象：

a。 window对象：所有的浏览器都支持window对象。它表示浏览器窗口。所有javascript 全局对象，函数以及变量均自动生成为window对象的成员。全局变量是window对象的属性。全局函数是window对象的方法。甚至HTML DOM 的document 也是window 对象的属性之一。

b。window尺寸：有三种方法能够确定浏览器窗口的尺寸。

Internet Explorer、chrome、firefox、opera以及safari：

window.innerHeight

(浏览器窗口的内部高度【包括滚动条】)

window.innerWidth（浏览器窗口的内部宽度【包括滚动条】）

Internet Explorer8、7、6、5

document.documentElement.clientHeight

document.documentElement.clientWidth

或者：

document.body.clientHeight

document.body.clientWidth

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BOM</title>
<h1 id="demo"></h1>
<script>
1：
   var w=window.innerWidth;
	var h=window.innerHeight;
	var iw=window.document.documentElement.clientWidth;
	alert(iw);
2：总结一起：
	var w=window.innerWidth||document.documentElement.clientWidth;
	var h=window.innerHeight||document.documentElement.clientWidth||document.body.clientHeight;
	x=document.getElementById("demo");
	x.innerHTML="浏览器window宽度:"+w+"高度："+h;

c。其他window方法：

	window.open();//打开新窗口
	window.close();//关闭当前窗口
	window.moveTo();//移动当前窗口
	window.resizeTo();//调整当前窗口的尺寸

3：window screen：

window.screen 对象包含有关用户屏幕的信息

window.screen 对象在编写时可以不使用window这个前缀一些属性

screen.avaliWidth 可用的屏幕宽度

screen.avaliHeight 可用的屏幕高度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏

	document.write("可用的宽度："+screen.availWidth);
	document.write("可用的高度："+screen.availHeight);

4：window lacotion：

获取URL地址

	document.write(location.href);

5：弹窗：

     alert('警告框');//警告框
	
	//判断框（判断型的弹窗）
	if(confirm("你喜欢我吗？"))
		{
			alert('yes i love');
		}
	else{
		alert('No i do not love');
	}
	//弹出输入框
	var name =prompt("请输入你的名字");
	if(name){
		alert("欢迎您！");
	}

6：计时事件：

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

<head>
<script>	
//-------------------------------计时事件----------------------------------------
	1语法： setInterval（函数体[只需求结果]，执行时间【毫秒为单位】1000毫秒为1秒）
/setInterval(function(){
		for(a=0;a<5;a++)
			document.write(a);
		
	},1000)
	2--------------设置一个动态时间显示-------------------

	function ad(){
		var d=new Date();
		var time=d.toLocaleTimeString();
		document.getElementById("clock").value=time;
	}
    setInterval("ad()",1000);//1秒执行一次显示时间
	
</script>
</head>

<body>
	<input type="text" id="clock">
</body>
</html>

显示效果：

21网页前端javascript ——对象中的方法、BOM相关

猜你喜欢