第四周学习web第二天

今天的代码:

<!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>

第四周学习web第二天相关推荐

java web开发初学_2018年学习Web开发的绝对初学者指南
java web开发初学 This post was originally published on Coder-Coder.com. 该帖子最初发布在Coder-Coder.com上 . If yo ...
20169212 2016-2017-2 《网络攻防实践》第四周学习总结
20169212 2016-2017-2 <网络攻防实践>第四周学习总结教材学习中的问题和解决过程 wireshark学习主机:Kali ip:192.168.1.117 目标:www ...
2017-2018-1 20155320 《信息安全系统设计基础》第十四周学习总结
2017-2018-1 20155320 <信息安全系统设计基础>第十四周学习总结参考老师提供的教材内容导读本周的内容是要找出全书你认为学得最差的一章,深入重新学习一下我决定学习第十 ...
2017-2018-1 20155207 《信息安全系统设计基础》第四周学习总结
2017-2018-1 20155207 <信息安全系统设计基础>第四周学习总结课堂实践myod 要求: 1.参考教材第十章内容 2.用Linux IO相关系统调用编写myod.c 用m ...
20172310 2017-2018-2 《程序设计与数据结构》第四周学习总结
20172310 2017-2018-2 <程序设计与数据结构>第四周学习总结教材学习内容总结第四章类结构.实例数据.形式参数.实际参数这些概念实在是很容易混淆,一开始我都完全不知道 ...
20155334 2016-2017-2 《Java程序设计》第四周学习总结
20155334 2016-2017-2 <Java程序设计>第四周学习总结教材学习内容总结第六章:继承与多态继承:面对对象中,子类继承父类,避免重复的行为定义 extends表示会 ...
2018-2019-1 20165237 《信息安全系统设计基础》第四周学习总结
2018-2019-1 20165237 <信息安全系统设计基础>第四周学习总结处理器体系结构 Y86指令集体系结构内容:定义一个指令集体系结构,包括定义各种状态元素.指令集和它们的编 ...
《程序设计与数据结构》第四周学习总结
学号 20172326 <程序设计与数据结构>第四周学习总结教材学习内容总结列表与栈,队列的关系与区别有序列表插入时插入方法无序列表的区别 Comparable方法的重载用链表, ...
20172304 《程序设计与数据结构》第四周学习总结
20172304 <程序设计与数据结构>第四周学习总结教材学习内容总结第六章主要介绍了列表,这个列表是一种概念上的笼统的定义. 列表包括链表和数组. 列表分为:有序列表,无序列表,索引 ...

第四周学习web第二天

第四周学习web第二天相关推荐

最新文章

热门文章