web day03(DHTML)

最新推荐文章于 2025-04-11 13:47:22 发布

快乐咸鱼Y

最新推荐文章于 2025-04-11 13:47:22 发布

阅读量112

点赞数

分类专栏： web 文章标签： html

本文链接：https://blog.youkuaiyun.com/yygyj/article/details/112232882

版权

web 专栏收录该内容

20 篇文章

订阅专栏

在这里插入图片描述

1、DHTML概述
a.DHTML Dynamic动态的HTML
b.DHTML认为页面中的每一个元素都可以看成是一个对象
c.DHTML操作页面中的对象就是在操作页面中的元素
d.DHTML可以对页面中的对象进行增删改查的操作
2.BOM和DOM
a.BOM浏览器对象模型
windown对象：
其中包含的方法：
onblur：失去焦点
onfocus：获取焦点
onload:当前浏览器装载完成后触发
alert
confirm
prompt
close(仅限ie和chrom)
setinterval
settimeout
location
history
screen
navigator
在这里插入图片描述

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>BOM浏览器对象模型</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		//BOM浏览器对象模型
		//windown代表当前窗口
		/*//离开焦点
		window.οnblur=function(){
			alert("鼠标离开");
		}*/
		/*//获得焦点
		window.οnfοcus=function(){
			alert("获取焦点");
		}*/
		/*//文档就绪事件--等待页面加载完成之后再执行的js代码
		window.οnlοad=function(){
			var div=document.getElementById("test");
			div.innerText="aaa";
		}*/
		/*//confirm确认提示框
		var flag=window.confirm("是否修炼葵花宝典？");
		if(flag){
			alert("欲练此功，必先自宫");
		}else{
			alert("不练此功，不要自宫");
		}*/
		/*//prompt用户输入消息提醒框
		var password=window.prompt("请输入密码？");
		if("9696"==password){
			alert("密码正确");
		}else{
			alert("密码错误");
		}*/
		//window.close();
		/*//每经过指定毫秒值后执行一段函数
		window.setInterval(function(){
			var div=document.getElementById("test");
			var date=new Date();
			var time=date.toLocaleString();
			//div.innerText=time;
			div.innerText+="aa";
			}, 1000);*/
			//经过指定毫秒值后执行一段函数
			window.setTimeout(function () {
				
				alert("三秒钟过去了");
			}, 3000);
		</script>
	</HEAD>
	<BODY>
		<div id="test" class="test">
			
		</div>
	</BODY>
</HTML>

js对象–内置对象
String --基本数据类型字符串类型的包装对象
Boolean----基本数据类型布尔类型的包装类对象
Number----基本数据类型数值类型的包装对象
Array—数组类型的包装对象
Function----函数类型的包装对象
Math–数据对象，封装了很多的数学常量和数学方法
Date—日期时间对象，封装了很多日期实现的相关方法
Global—全局对象。js中有一些方法和属性经常使用，但归到哪个对象上都不合适，Goobal定义的方法和属性可以直接使用
RegExp—正则对象，保存有关正则表达式模式匹配信息的固有全局对象。Partten
邮箱的正则

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>js对象</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		//js内置对象
		//Math
		console.log(Math.ceil(3.4));//4
		console.log(Math.floor(4.3));//4
		console.log(Math.round(3.5));//4
		console.log(Math.random());
		//Date
		var date=new Date();
		console.log(date.toLocaleString());
		//Global全局对象
		console.log(parseInt("123aaa123"));
		//eval("alert(123)");
		//RegExp
		//123@hotmail.com.cn.org.edu
		var email="123@hotmail.com.cn.org.edu";
		var reg=/\w+@\w+(\.\w+)+/;
		var reg1=new RegExp("\\w+@\\w+(\\w+\\.)+");
		console.log(reg.test(email));
		console.log(reg1.test(email));
		</script>
	</HEAD>
	<BODY>
		<div id="test" class="test">
			
		</div>
	</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>BOM</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		//location地址栏信息对象
		//hash设置或获取再href属性中在“#”后面的分段
		//host  设置或获取location或URL的主机名称部分
		//href  设置或获取整个URL为字符串
		console.log(window.location.hash);
		console.log(window.location.host);
		console.log(window.location.hostname);
		console.log(window.location.href);
		//history
		function back(){
			//window.history.back();
			window.history.go(-1);
		}
		function  forward() {
			
			//window.history.forward();
			window.history.go(1);
		}
		console.log(window.history.length);
		//screen
		//availHeight  获取系统屏幕工作区域的长度 排除任务栏
		//availWidth  获取系统屏幕工作区域的宽度   排除任务栏
		console.log(window.screen.availHeight);
		console.log(window.screen.availWidth);
		//navigator

		//appCodeName  获取浏览器的代码名称
		//appMinorVersion  获取应用程序的版本值
		//appName  获取浏览器的名称
		//appVersion  获取浏览器的运行的平台和版本
		console.log(window.navigator.appCodeName);
		console.log(window.navigator.appMinorVersion);
		console.log(window.navigator.appName);
		console.log(window.navigator.appVersion);
		</script>
	</HEAD>
	<BODY>
		<div id="test" class="test">
			<input type="button" value="上一条历史记录" onclick="back()"/>
			<input type="button" value="下一条历史记录" onclick="forward()"/>
		</div>
	</BODY>
</HTML>

案例：

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>如何通过document获取数据</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		function demo1(){//根据id获取元素，获取元素身上的值
			var username=document.getElementById("username");
			alert(username.value);
		}
		function demo2(){//根据name获取元素，获取数组中每一个节点的值
			var elements=document.getElementsByName("password");
			for(var i=0;i<elements.length;i++){
				alert(elements[i].value);
			}
		}
		function  demo3() {
			//根据元素名称获取数组中每个节点的值
			var elems=document.getElementsByTagName("input");
			for(var i=0;i<elems.length;i++){
				alert(elems[i].value);
			}
		}
		function  demo4() {
			
			var p=document.getElementById("pid");
			//alert(p.innerHTML);//p元素中的HTML
			//alert(p.innerText);//p元素中的文字
			p.innerHTML="<font color='green'> 真好</font>";//以HTML展示
			//p.innerText="<font color='green'> 真好</font>";//以文本展示
		}
		</script>
	</HEAD>
	<BODY>
		用户名称：<input type="text" name="username" id="username"/><br/>
		用户密码：<input type="password" name="password" id="password"/><br/>
		用户密码2：<input type="password" name="password" id="password2"/><br/>
		<hr/>
		<input type="button" value="通过ID获取节点的值" onclick="demo1()" />
		<input type="button" value="通过Name获取节点的值" onclick="demo2()" />
		<input type="button" value="通过TAG获取节点的值" onclick="demo3()" />//根据元素名称获取元素
		<hr/>
		<p id="pid"><font color="red"> 获取p标签中的文字</font></p>
		<input type="button" value="获取P中的文字" onclick="demo4()" />
	</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>节点的增删改查</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<!--加入css样式表-->
<style type="text/css">
div{
border:#0099FF 1px solid;
height:60px;
width:120px;
margin: 20px 0px 20px 20px ;
padding: 10px 0px 0px 20px;
}
#div_1{
background: #00FFFF;
}
#div_2{
background: #FF3399;
}
#div_3{
background: #0000FF;
}
#div_4{
background: #FFFF66;
}
			
</style>		
		<script type="text/javascript"> 
		function addNode() {
			//1.创建节点
			var new_div=document.createElement("div");
			//2.挂载节点
			//2.1寻找一个已有节点（父节点）
			var parent=document.getElementsByTagName("BODY")[0];
			//2.2将新节点挂载到已有节点的身上
			parent.appendChild(new_div);
		}
		//删除节点
		function deleteNode(){
			//找到父节点
			var parent=document.getElementsByTagName("BODY")[0];
			//找到要删除的字节点
			var new_div1=document.getElementById("div_4");
			//从父节点身上删除子节点
			parent.removeChild(new_div1);
		}
		//更新节点
		function updateNode(){
			//找到父节点
			var parent = document.getElementsByTagName("BODY")[0];
			//找到要被替换的子节点
			var div_4=document.getElementById("div_4");
			//创建新节点以替换旧的节点
			var new_div = document.createElement("div");
			//替换旧节点
			parent.replaceChild(new_div,div_4);
		}
		//克隆节点
		function copyNode(){
			//获取目标节点完成克隆
			var div_2=document.getElementById("div_2");
			var c_div=div_2.cloneNode(true);//赋true值会将div的内容也克隆过去
			//挂载节点
			//获取父节点
			var parent =document.getElementsByTagName("BODY")[0];
			//挂载节点
			parent.appendChild(c_div);
		}
		</script>
	</HEAD>
	<BODY>
		<div id="div_1">
			
		</div>
		<div id="div_2">
			div区域2
		</div>
		<div id="div_3">
			div区域3
		</div>
		<div id="div_4">
			div区域4
		</div>
		<input type="button" value="创建并添加节点" onclick="addNode()" />
		<input type="button" value="删除节点" onclick="deleteNode()" />
		<input type="button" value="替换节点" onclick="updateNode()" />
		<input type="button" value="克隆节点" onclick="copyNode()" />
	</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>新闻广告</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<!--伪元素选择器-->
<style type="text/css">
a:link,a:visited{
	color: #FF9900;
	text-decoration: none;
	font-size: 15px;
	}	
a:hover{
	color: #0099FF;
	}	
.newsstyle{
border: #0099FF 1px solid;
font-size: 16px;
width:400px;	
}
/*预先订一些选择器*/
.max{
	border: #0099FF 1px solid;
	font-size: 20px;
	color: #FF0000;
	background: #CCFFFF;
	width:400px;
}
.min{
	border: #0099FF 1px solid;
	font-size: 12px;
	color: #0000FF;
	background: #FFFFFF;
	width:400px;
}
</style>		
		<script type="text/javascript"> 
		function resize(object){
			//1.获取div接口
			var div=document.getElementById("newstext");
			//2.设置div身上的class属性
			div.className=object;
		}
		</script>
	</HEAD>
	<BODY>
		<h2>这是一个大新闻</h2>
		<a href="javascript:void(0)" onclick="resize('min')">小字体</a>
		<a href="javascript:void(0)" onclick="resize('newsstyle')">中字体</a>
		<a href="javascript:void(0)" onclick="resize('max')">大字体</a>
		<hr/>
		<div id="newstext" class="newsstyle">
			演示接口.很多内容.怎么办？等等<br/>
			演示接口.很多内容.怎么办？等等<br/>
			演示接口.很多内容.怎么办？等等<br/>
			演示接口.很多内容.怎么办？等等<br/>
			演示接口.很多内容.怎么办？等等<br/>
			演示接口.很多内容.怎么办？等等<br/>
		</div>
	</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>好友列表</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
table{
	border: #0099FF 1px solid;
	width:100px;
	border-collapse:collapse;
}
table td{
	border: #0066FF 1px solid;
	background: #FF9900;
	text-align: center;
}
table td div{
	background: #FFFF99;
	text-align: center;
}
table td a:link,table td a:visited{
	color: #00FFFF;
	text-decoration: none;
}
table td a:hover{
	color: #00CC00;
}
/*使用display属性，如果取值为none就是隐藏标签*/
table td div{
	display: none;
}
.open{
	display: block;
}
.close{
	display: none;
}
</style>		
		<script type="text/javascript"> 
		 	function openDiv(obj){
			 	var div=obj.nextSibling.nextSibling;
			 	var divs=document.getElementsByTagName("div");
			 	for(var i=0;i<divs.length;i++){
				 	if(div!=divs[i]){
					 	divs[i].style.display="none";
				 	}
			 	}
			 	/*if("none"==div.style.display){
				 	div.style.display="block";
			 	}else{
				 	div.style.display="none";
			 	}*/
			 	"none"==div.style.display?div.style.display="block":div.style.display="none";
		 	}
		</script>
	</HEAD>
	<BODY>
		<table>
			<tr>
			<td>
				<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
				<div>
					秦始皇<br/>
					刘邦<br/>
					李世民<br/>
					康熙<br/>
				</div>
			</td>
			</tr>
			<tr>
			<td>
				<a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
				<div>
					刘备<br/>
					关羽<br/>
					张飞<br/>
					赵云<br/>
				</div>
			</td>
			</tr>
			<tr>
			<td>
				<a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
				<div>
					西施<br/>
					貂蝉<br/>
					杨贵妃<br/>
					王昭君<br/>
				</div>
			</td>
			</tr>
			
		</table>
	</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>二级联动菜单</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript"> 
		 	function selectCity(obj){
			 	var cities={
				 	"北京市":["海淀区","朝阳区","丰台区"],
				 	"河北省":["石家庄","唐山","秦皇岛"],
				 	"辽宁省":["沈阳","大连","鞍山"],
				 	"山东省":["青岛","济南","烟台"]
			 	}
			 	//1.先获取省市信息
			 	var province=obj.value;
			 	//2.根据省市信息获取城市信息
			 	var city=cities[province];
			 	//3.将城市信息绑定在第二个下拉框中
			 	//3.1获取第二个下拉框
			 	var sel_city=document.getElementById("city");
			 	//清空操作
			 	sel_city.innerHTML="<option>--请选择--</option>"
			 	//3.2循环添加城市信息
			 	for(var i=0;i<city.length;i++){
				 	sel_city.innerHTML+="<option>"+city[i]+"</option>";
			 	}
		 	}
		</script>
	</HEAD>
	<BODY>
		<select id="province" onchange="selectCity(this)">
			<option>--选择省市--</option>
			<option>北京市</option>
			<option>河北省</option>
			<option>辽宁省</option>
			<option>山东省</option>
		</select>
		<select id="city">
			<option>--选择城市--</option>
		</select>
	</BODY>
</HTML>

<HTML>
	<HEAD>
		<title>注册表单练习</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			span{
				color: red;
				font-size: 12px;
			}
		</style>
		<script type="text/javascript">
			//在点击提交时调用
			function checkData(){
				//全局变量
			var canSub=true;
			/*//1.非空校验
			//获取用户输入框中的对象
			var username=document.getElementsByName("username")[0];
			//获取span提示框
			var username_msg=document.getElementById("username_msg");
			//清空操作
			msg.innerText="";
			//判断用户输入的内容是否为空
			if(username.value==""){
				username_msg.innerText="用户名不能为空";
			}*/
			//用户名不为空
			canSub=checkNull("username","用户名不能为空")&&canSub;
			//密码不为空
			canSub=checkNull("password","密码不能为空")&&canSub;
			canSub=checkNull("password2","密码不能为空")&&canSub;
			//密码一致性校验
			var password=document.getElementsByName("password")[0].value;
			var password2=document.getElementsByName("password2")[0].value;
			var password2_msg=document.getElementById("password2_msg");
			if(password!=""&&password2!=""&&password!=password2){
				password2_msg.innerText="密码不一致";
				canSub=false;
			}
			//邮箱不为空
			canSub=checkNull("email","邮箱内容不能为空")&&canSub;
			//邮箱格式校验
			var email=document.getElementsByName("email")[0].value;
			var reg=/\w+@\w+(\.\w+)+/;
			var email_msg=document.getElementById("email_msg");
			if(!reg.test(email)&&email!=""){
				email_msg.innerText="邮箱格式错误";
				canSub=false;
			}
			//昵称校验
			canSub=checkNull("nickname","昵称不能为空")&&canSub;
			//性别的的非空校验（单选框）
			//获取性别的单选框（两个框的状态相同说明为空）
			var gender1=document.getElementsByName("gender")[0];
			var gender2=document.getElementsByName("gender")[1];
			//获取性别后的span框
			var gender_msg=document.getElementById("gender_msg");
			//清除操作
			gender_msg.innerText="";
			if(gender1.checked==gender2.checked){
				gender_msg.innerText="性别不能为空";
				canSub=false;
			}
			//爱好非空校验（复选框）
			//获取爱好的复选框（有一个选中就行）
			var like=document.getElementsByName("like");
			//获取爱好后边的span框
			var like_msg=document.getElementById("like_msg");
			//标志位
			var flag=false;
			//遍历复选框
			for(var i=0;i<like.length;i++){
				if(like[i].checked==true){
					flag=true;
				}
			}
			//清空操作
			like_msg.innerText="";
			if(!flag){//如果为false，证明没有任何爱好，进入判断
				like_msg.innerText="爱好不能为空";
				canSub=false;
			}
			return canSub;
			}
			
			function checkNull(name,msg){
				//获取用户输入框中的对象
				var tag=document.getElementsByName(name)[0].value;
				//获取span提示框
				var tag_msg=document.getElementById(name+"_msg");
				//清空操作
				tag_msg.innerText="";
				//判断用户输入的内容是否为空
				if(tag==""){
					tag_msg.innerText=msg;
					return false;
			}
				return true;
			}
			function descFocus(thisobj){
				//
				if(thisobj.value== "请输入个人介绍"){
					thisobj.value = "";
				}
			}
			function descBlur(thisobj){
				//
				if(thisobj.value==""){
					thisobj.value="请输入个人介绍";
				}
				}	
		</script>
	</HEAD>
	<BODY>
		<form action="http://localhost:8080" method="post" onsubmit="return checkData()">
			<table border="2" bordercolor="#FF1493" bgcolor="#F5BEB3" cellspacing="0" cellpadding="5PX" align="center">
				<caption>
					<h1>
					<font color="#FF1493">注册表单</font>
					</h1>
				</caption>
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="username"/> <span id="username_msg"></span></td>
			    </tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="password"/> <span id="password_msg"></span></td>
			    </tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" name="password2"/> <span id="password2_msg"></span></td>
			    </tr>
				<tr>
					<td>昵称：</td>
					<td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td> 
			    </tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="text" name="email"/> <span id="email_msg"></span></td>
			    </tr>
				<tr>
					<td>头像：</td>
					<td><input type="file" name="head"/></td>
			    </tr>
				<tr>
					<td>性别：</td>
					<td><input type="radio" name="gender" value="male"/>男
					<input type="radio" name="gender" value="female"/>女
					<span id="gender_msg"></span>
					</td>
			    </tr>
			    <tr>
				    <td>爱好：</td>
				    <td><input type="checkbox" name="like" value="lq"/>篮球
				    <input type="checkbox" name="like" value="zq"/>足球
				    <input type="checkbox" name="like" value="qq"/>铅球
				    <input type="checkbox" name="like" value="blq"/>玻璃球
				    <span id="like_msg"></span>
				    </td>
			    </tr>
				<tr>
					<td>所在城市：</td>
					<td><select name="city">
						<option>北京</option>
						<option>上海</option>
						<option>天津</option>
						<option selected="selected">唐山</option>
						</select>
						<span id="city_msg"></span>
						</td>
			    </tr>
				<tr>
					<td>自我介绍：</td>
				<td><textarea id="desc" name="desc" rows="3" cols="60" onfocus="descFocus(this)" onblur="descBlur(this)">请输入个人介绍</textarea></td>
			    </tr>
				<tr>
					<td>验证码：</td>
					<td>
						<input type="text" name="valistr"/>
						<img src="1.jpg" width="20px" height="20px"/>
						<span id="valistr_msg"></span>
					</td>
			    </tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit"/>
						<input type="reset"/>
					</td>
			    </tr>
			</table>
		</form>
	</BODY>
</HTML>