js_day20--js DOM编程（window对象1）

最新推荐文章于 2021-08-31 17:41:49 发布

原创最新推荐文章于 2021-08-31 17:41:49 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

☛Web前端同时被 2 个专栏收录

38 篇文章

订阅专栏

------ JavaScript

21 篇文章

订阅专栏

本文介绍了JavaScript DOM编程的基础知识，包括DOM的概念及其在网页交互中的应用，通过多个实例展示了如何利用DOM操作网页元素，例如定时显示消息、更新页面内容等。

Day20

Js的Dom编程
为什么学dom编程：

我们在前面把js的基础知识讲解完了，可是如果你认为js只能做类似点击一个按钮，显示当前时间，那你就太小看jsl，实际上js更重要的作用是可以让用户对网页元素进行交互操作，这才是学习js的精华所在。

通过dom编程，我们可以写出各种网页游戏
dom编程也是ajax的重要基础

dom编程简介

DOM=DocumentObject Model（文档对象模型），根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。

dom对象

js把浏览器，网页文档和网页文档中的html元素都用相应的内置对象来表示，这些对象与对象间的层次关系称为dom，针对网页（html,jsp,php,aspx.net）的dom就是html dom，我们这讲的就是html dom。

Dom编程其实分为htmldom编程和Xml dom编程。

Dom编程时，会把html文档看做是一棵dom树。

Bom介绍(Borwser ObjectModel)浏览器对象模型

因为做浏览器的厂家很多，W3C定义了一个做浏览器的规范，规定

- 通过使用BOM，可移动窗口、更改状态栏文本。Bom是W3C组织提出的，他建议所有的浏览器都应当遵循这样的设计规范，可以说bom和dom关系密切，相互影响，bom为纲，dom为目。我们可以简单的理解dom就是bom的具体实现。

Dom对象层次一览图

Dom对象详解
- Window 对象
  
  Window对象表示一个浏览器窗口或一个框架，在客户端javascript中，window对象是全局对象，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来用。
  
  在使用window对象的方法和属性的时候，可以不带window，比如：window.alert(“Hello”);可以直接写成alert(“Hello”);
  
  Window对象常用的函数和属性

alert() 显示消息和一个确认按钮的警告框
confirm() 显示消息以及确认按钮和取消按钮的对话框
compile()
setInterval() 按照指定的周期（毫秒计）来循环调用函数或计算表达式
clearInterval() 取消有setInterval设定的定时器
setTimeout() 指定的毫秒数后调用函数或计算表达式
clearTimeout() 取消有setTimeout()设定的定时器

(1)confirm案例：

<html>
	<head>
		<title>window.test</title>
		<script language="javascript" type="text/javascript">
		<!--
		function test(){
			var res = window.confirm("你要删除吗？");
			if(res){
				window.alert("删除成功");	
			}else{
				window.alert("放弃删除");	
			}
		}
			//>
		</script>	
	</head>	
	<body>
		<input type="button"  value="删除记录" onclick="test()"/>
	</body>
</html>

(2)setInterval()：

该函数可以根据指定的时间，循环的执行某个函数，或者表达式

需求：请每隔1秒钟，弹出一个对话框：hello world

function sayHello(){
			window.alert("Hello,world");	
		}
		setInterval("sayHello()",1000);

显示时钟：

<html>
	<head>
		<title>window.test</title>
		<script language="javascript" type="text/javascript">
		<!--
		
		function showTime(){
			//在元素间的文本就是通过 对象名.innerText
			document.getElementById("myTime").innerText = new Date().toLocaleString();
		}
		setInterval("showTime()",1000);
		
			//>
		</script>	
	</head>	
	<body>
		<input type="button"  value="删除记录" onclick="test()"/>
		<span id="myTime"></span>
	</body>
</html>

需求：一个小人动起来

源码:

<html>
	<head>
		<title>window.test</title>
		<script language="javascript" type="text/javascript">
		<!--
		//通过静态图片的切换实现动画
		//改变img的src
		var n=1;
		function run(){
			//得到img对象
			var image = document.getElementById("image");
			image.src=((n++)%5+1)+".jpg";
			var imgLeft=image.style.left;
			var imgLeftNum =(parseInt(imgLeft.substring(0,imgLeft.indexOf("p")))+20);
			if(imgLeftNum>1200){
					imgLeftNum =0;
			}
						image.style.left=imgLeftNum+"px";
		}
		setInterval("run()",100);
		
		
			//>
		</script>	
	</head>	
	<body>
		<div style="height:387px;width:1350px;background-color:black">
	<img id="image" style="width:171px;height:387px;position:absolute;left:0px;top:8px" src="1.jpg"/>
	</div>
	</body>
</html>

扩展要求：小人走10步就停下来

(3).clearInterval()取消由setInterval设定的定时器

<html>
	<head>
		<title>window.test</title>
		<script language="javascript" type="text/javascript">
		<!--
		//通过静态图片的切换实现动画
		//改变img的src
		var n=1;
		var count=0;
		function run(){
			
			count++;
			if(count==11){
				//停止定时器
				clearInterval(myTimer);	
			}
			//得到img对象
			var image = document.getElementById("image");
			image.src=((n++)%5+1)+".jpg";
			var imgLeft=image.style.left;
			var imgLeftNum =(parseInt(imgLeft.substring(0,imgLeft.indexOf("p")))+20);
			if(imgLeftNum>1200){
					imgLeftNum =0;
			}
						image.style.left=imgLeftNum+"px";
		}
		var myTimer = setInterval("run()",100);
		
		
			//>
		</script>	
	</head>	
	<body>
		<div style="height:387px;width:1350px;background-color:black">
	<img id="image" style="width:171px;height:387px;position:absolute;left:0px;top:8px" src="1.jpg"/>
	</div>
	</body>
</html>


需求：在打开页面后，延时5秒后弹出hello，world
(4)setTimeout()在指定毫秒数后调用函数或计算表达式（但是只调用一次）
<html>
	<head>
		<title>window.test</title>
		<script language="javascript" type="text/javascript">
		<!--
		function sayHello(){
			window.alert("Hello,world");	
		}
		setTimeout("sayHello()",5000);
			//>
		</script>	
	</head>	
	<body>
	</body>
</html>