第四周学习web第二天

Angelhhcn
于 2019-09-27 14:51:45 发布
阅读量139
点赞数
本文链接：https://blog.csdn.net/Angelhhcn/article/details/101535325
版权
今天的代码:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/pro3.css" />
		<script type="text/javascript">
		//换肤
			function hf1(){
				var hf=document.getElementById("hf");
				hf.style.background="yellow";
			}
			function hf2(){
				var hf=document.getElementById("hf");
				hf.style.background="red";
			}
			
		//全选
        window.onload = function(){
            var xx=document.getElementsByName("items");
            var quanxuan=document.getElementById("All");
            var quanbuxuan=document.getElementById("No");
            var fanxuan=document.getElementById("Rev");
            var tijiao=document.getElementById("sendBtn");
            var qxbx=document.getElementById("checkedAllBox");
            for(var i=0;i<xx.length;i++){
                xx[i].onclick=function (ev) {
                    wf();
                };
            }
            function wf () {
                var flag=true;
                for(var j=0;j<xx.length;j++){
                    if(!xx[j].checked){
                        flag=false;
                        break;
                    }
                }
                qxbx.checked=flag;
            }
            qxbx.onclick=function (ev) {//全选/全不选
                for(var i=0;i<xx.length;i++) {
                    if (qxbx.checked) {
                        xx[i].checked = "true"
                    } else {
                            xx[i].checked = ""
                    }
                }
            };
            quanxuan.onclick=function(){//全选
                for(var i=0;i<xx.length;i++){
                    xx[i].checked="true"
                }
                wf();
            };
            quanbuxuan.onclick=function(){//全不选
                for(var i=0;i<xx.length;i++){
                    xx[i].checked=""
                }
                wf();
            };
            fanxuan.onclick=function(){//反选
                for(var i=0;i<xx.length;i++){
                    xx[i].checked=!xx[i].checked;
                }
                wf();
            };
            tijiao.onclick=function (ev) {
              for(var i=0;i<xx.length;i++){
                  if(xx[i].checked)
                  alert(xx[i].value)
              }
            }
            
            //8个dom节点的查找
            	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);
    				}
            
            
            //鼠标移动显示文字(直接写在了html中)  
        }
        //图片变大变色
        function bd(){
        	document.getElementById("bd").style.width="200px";
        	document.getElementById("bd").style.height="200px";
        	document.getElementById("bd").style.background="blue";
        }
        function hy(){
        	document.getElementById("bd").style.width="100px";
        	document.getElementById("bd").style.height="100px";
        	document.getElementById("bd").style.background="red";
        }
        
        //乘法表
        function cf(){
        	var a=document.getElementById("xf");
				for(var i=1;i<10;i++){
				for(var j=1;j<=i;j++){
					a.innerHTML+=i+"*"+j+"="+i*j+"  ";
				}
			a.innerHTML+="\n"	
			}
        }
        
        
        //下拉列表输入法
        function xs(){
				document.getElementById("xlk").style.display="block";
				document.getElementById("b").innerHTML="↑输入法";
				document.getElementById("b").href="javascript:yc()";
			};
			function yc(){
				document.getElementById("xlk").style.display="none";
				document.getElementById("b").innerHTML="↓输入法";
				document.getElementById("b").href="javascript:xs()";
			}
		</script>
	</head>
	<body>
		<div id="hf">
		<form id="message">
			<h2>换肤</h2>
			<dl>
				<dt>
				<input id="btn1" type="button" value="黄皮肤" 
					onclick="hf1()"/>
				<input id="btn2" type="button" value="红皮肤" 
					onclick="hf2()"
					/>
					</dt>
			</dl>
			<dd>输入账号:<input type="text"></dd>
			<dd>输入密码:<input type="password"></dd>
			<dd>请输留言:<textarea></textarea></dd>
			<dd><input type="submit" value="提交"></dd>
		</form>	
		</div>
		
		<div id="qx">
			<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="All" value="全　选" />
    <input type="button" id="No" value="全不选" />
    <input type="button" id="Rev" value="反　选" />
    <input type="button" id="sendBtn" value="提　交" />
</form>
		</div>
		
	
	<div id="yd">
		<label  
				onmouseout="document.getElementById('div1').style.display='none'" 
				onmousemove="document.getElementById('div1').style.display='block'" />
			<input type="checkbox" />自动登录
		</label>
		<div id="div1"">不要在网吧</div>
	</div>
	
	<div id="kzbd">
	<div id="bd" onmouseover="bd()"
				onmouseout="hy()"
				>
	</div>
	</div>
	
	<div id="cfb">
		<input type="button" value="乘法表" onclick="cf()" />
		<textarea id="xf" rows="10" cols="100"></textarea>
	</div>
	
	
	
	
	<div id="jd">
	<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>
    		</div>
    		
    		
    		
    		<div id="srf">
			<a href="javascript:yc()" id="b">↑输入法</a>
			<div id="xlk">
			<option>谷歌输入法</option>
			<option>qq拼音输入法</option>
			<option>五笔输入法</option>
			<option>智能abc</option>
			<option>搜狗输入法</option>
			</div>
		</div>
	</body>
</html>
Angelhhcn
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四周学习web第二天

今天的代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link type="text/css" rel="stylesheet" href="css/pro3.css" /> <scrip...
复制链接

扫一扫