学习web第三周第五天的项目-CSDN博客

本文链接：https://blog.csdn.net/Angelhhcn/article/details/101147509

今天我们还学习了一个项目
就是把所有今天学习的功能全部实现一遍
代码为：
html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" href="css/zy.css" rel="stylesheet"  />
		<script type="text/javascript">
			window.onload=function(){
				var btn01=document.getElementById("btn01");
				var btn02=document.getElementById("btn02");
				var btn03=document.getElementById("btn03");
				var btn04=document.getElementById("btn04");
				var btn05=document.getElementById("btn05");
				var btn06=document.getElementById("btn06");
				var btn07=document.getElementById("btn07");
				var btn08=document.getElementById("btn08");
				var btn09=document.getElementById("btn09");
				var btn10=document.getElementById("btn10");
				btn01.onclick=function(){
					var bj=document.getElementById("bj");
					alert(bj.innerHTML);
				}
				btn02.onclick=function(){
					var list1=document.getElementsByTagName("li");
					for(var i=0;i<list1.length;i++){
						alert(list1[i].innerHTML);
					}
				}
				btn03.onclick=function(){
					var gender=document.getElementsByName("gender");
					for(var i=0;i<gender.length;i++){
						alert(gender[i].value);
					}
					
				}
				btn04.onclick=function(){
					var city=document.getElementById("city");
					var list2=city.getElementsByTagName("li");
					for(var i=0;i<list2.length;i++){
						alert(list2[i].innerHTML);
					}
				}
				btn05.onclick=function(){
					var city=document.getElementById("city");
					for(var i=0;i<city.children.length;i++){
						alert(city.children[i].innerHTML);
					}
				}
				btn06.onclick=function(){
					var phone=document.getElementById("phone");
						alert(phone.firstChild.innerHTML);
				}
				btn07.onclick=function(){
					var bj=document.getElementById("bj");
					alert(bj.parentNode.innerText);
				}
				btn08.onclick=function(){
					var az=document.getElementById("android");
					alert(az.previousElementSibling.innerHTML);
				}
				btn09.onclick=function(){
					var name=document.getElementById("username");
					alert(name.value);
				}
				btn10.onclick=function(){
					var name=document.getElementById("username");
					name.value="吃饭了."
				}
				btn11.onclick=function(){
					var bj=document.getElementById("bj");
					alert(bj.innerHTML);
				}
			}
		</script>
	</head>
	<body>
		<div id="leftt">
			<div id="cs">
			<p>
				你喜欢哪个城市?
			</p>
			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
			</div>
			<div id="dj">
			<p>
				你喜欢哪款单机游戏？
			</p>
			<ul id="city">
				<li id="bj">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>
			</div>
			<div>
			<p>
				你手机的操作系统是?
			</p>
			<ul id="phone"><li id="bj">IOS</li><li id="android">Android</li><li>Windows Phone</li>
			</ul>
			</div>
		</div>
		<div id="right">
			<div><input type="button" id="btn01" value="查找#bj节点" /></div>
			<div><input type="button" id="btn02" value="查找所有li节点" /></div>
			<div><input type="button" id="btn03" value="查找name=gender的所有节点" /></div>
			<div><input type="button" id="btn04" value="查找#city下所有li节点" /></div>
			<div><input type="button" id="btn05" value="返回city的所有子节点" /></div>
			<div><input type="button" id="btn06" value="返回#phone的第一个子节点" /></div>
			<div><input type="button" id="btn07" value="返回#bj的父节点" /></div>
			<div><input type="button" id="btn08" value="返回#android的前一个兄弟节点" /></div>
			<div><input type="button" id="btn09" value="返回#username的value属性值" /></div>
			<div><input type="button" id="btn10" value="设置#username的value属性值" /></div>
			<div><input type="button" id="btn11" value="返回#bj的文本值" /></div>
		</div>
		<div id="leftb">
			<p>
				gender:
				<input type="radio" name="gender" value="Male" />Male
				<input type="radio" name="gender" value="Female" />Female
			</p>
			<p id="nm">name: <input type="text" id="username"/></p>
			
		</div>
	</body>
</html>

css:

#leftt{
	margin-top: 20px;
	float: left;
	width: 500px;
	height: 300px;
	border: solid 1px;
	
}
#right{
	margin-top: 20px;
	margin-left: 15px;
	float: left;
	width: 350px;
	height: 400px;
}
p{
	margin-left: 10px;
}
#leftb{
	margin-top: -90px;
	float: left;
	width: 500px;
	height: 120px;
	border: solid 1px;
}
#city{
	float: left;
	margin-left: 20px;
}
ul{
	list-style: none;
	margin-top: 0px;
	padding: 0px;
}
li{
	float: left;
	border-style: solid ;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: aqua;
}
#cs{
	height: 80px;
	
}
#dj{
	height: 80px;
}
#nm{
	margin-top: 30px;
}
#right input{
	width: 100%;
	margin-top: 10px;
}
#phone{
	float: left;
	margin-left: 20px;
}