以下示例均为html文件，保存至本地就可直接用浏览器打开以查看效果(^o^)/~
练习一：设置新闻字体
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>字体样式选择</title> 6 <style type="text/css"> 7 a:link,a:visited{ 8 text-decoration:none;//取消下划线 9 } 10 #newsText{ 11 border: #CC0033 double 2px; 12 800px; 13 } 14 p{ 15 text-indent:2em;//首行缩进 16 } 17 .max{ 18 font-size:36px; 19 color:#666699; 20 } 21 .mid{ 22 font-size:18px; 23 color:#6666FF; 24 } 25 .min{ 26 font-size:13px; 27 color:#3399FF; 28 } 29 </style> 30 </head> 31 <body> 32 <script type="text/javascript"> 33 function changeFont(className){ 34 var divNode = document.getElementById("newsText"); 35 divNode.className = className; 36 } 37 </script> 38 <h2 style="color:#FF0000">【念念有余】马云的达摩院想干嘛？</h2> 39 <a href="javascript:void(0)" onclick="changeFont('max')">大字体</a> 40 <a href="javascript:void(0)" onclick="changeFont('mid')">中字体</a> 41 <a href="javascript:void(0)" onclick="changeFont('min')">小字体</a> 42 <hr style="border:#99FF00 solid 1px"/> 43 <div id="newsText"> 44 <p> 45 两个着传统武打装扮的年轻人，斜步蹲身，一起擎出一个硕大的牌匾来，中间三个遒劲有力的字正是“达摩院”。 46 </p> 47 <p><img src="http://p0.ifengimg.com/pmop/2017/1014/BC710B82FEC535D27C6728240C1B20ED367433A7_size34_w500_h333.jpeg"/></p> 48 <p>马云说，要搞电商，于是有了阿里巴巴；马云说，要有网上支付，于是有了支付宝，有了蚂蚁金服； 49 马云说，要有云计算，于是到处是云计算。现在马云说，要有达摩院，于是，达摩院的牌子挂起来了。 50 </p> 51 <p> 52 10月11日开幕的2017云栖大会吸引了4万人之众，人们把这场大会当做一场嘉年华，会场外，男人女人们， 53 像游客一样撑起自拍杆，阿里帝国已经大到了令人咋舌的地步，批量创造着千万富翁。马云称阿里已经是世界上第21大经济体， 54 未来要做第5大经济体。大会上人们记得最真切的是有“外星人”之称的马云说要投资1000亿元建立达摩院。达摩院就是实验室。 55 马云为达摩院命名，当年马云同样为天猫命名。 56 </p> 57 <p> 58 “达摩院”这个名字很有阿里特色，达摩是一个佛教人物，民间常称其为达摩祖师，南印度人，自称佛传禅宗第二十八祖， 59 为中国禅宗始祖。负责达摩院的是阿里CTO张建锋，诨名行癫。马云号风清扬，阿里有头脸的人物都有一个江湖诨名， 60 就跟梁山泊一百零八将一样，连诨名都没有，估计这人在阿里也就没什么地位。 61 </p> 62 <p> 63 如果将一些典故或者武侠背景联系起来，就会明白，达摩院其实是藏经阁，这里将会发明各种必杀之技，未来也不知道会怎么样， 64 但大家都明白，谁掌握了技术，就会像大航海时代的殖民者一样，以少胜多。 65 </p> 66 <p> 67 但是必杀技哪里会那么简单？到了一定程度就会有瓶颈，一定不是现有水平的修修补补，而是牵涉到基础科学、基础技术， 68 越是处于领先地位的企业，越是走得靠前的企业，他们离天花板就越近，看得越清晰。这就是为什么国际顶尖企业会做顶尖研究， 69 他们有财力有眼力，还有能力。 70 </p> 71 <p> 72 “达摩院”首批公布的研究领域包括：量子计算、机器学习、基础算法、网络安全、视觉计算、自然语言处理、 73 下一代人机交互、芯片技术、传感器技术、嵌入式系统等，涵盖机器智能、智联网、金融科技等多个产业领域。 74 名目繁多，似乎无所不包，这里面可以看到马云的野心，这也显示了马云和阿里一个非常重要变化——由“术”向“道”。 75 </p> 76 <p> 77 马云说，阿里成立七八年的时候，他坚决反对公司有任何研究室、实验室的，因为当时阿里是一个初创公司， 78 公司在还没有立足之前就考虑研发是大灾难。阿里的做法一直是问题导向，遇到什么问题，需要什么，就组织工作人员去攻关。 79 </p> 80 <p> 81 马云多次说过，如果他是技术人员，一开始就知道会有这么多难题，估计就会退缩，就不会有现在的阿里巴巴、蚂蚁金服。 82 阿里现在不仅是遇到问题就组织科研人员去攻关，而是四处开拓疆土，看看有什么领域比较有机会。前者目的性很强，是问题导向， 83 后者则是四处撒网，花钱多但不一定有结果。 84 </p> 85 <p> 86 像这些比较基础的科研，一般是高校和科研院所承担，这些机构背后买单者是政府，这是政府要承担的职能之一， 87 因为这些研发大多是没有收益的，但对社会会比较有帮助，让单个企业承担的成本太高。这表明阿里已经不再担忧生存问题，愿意承担一部分政府承担的责任。 88 </p> 89 <p> 90 有不少人认为，阿里这次投入，只是一场作秀，科技不可能拔毛助长，不可能投进去很多钱，就能大跃进。 91 不过公众应该去想一想，像阿里这样精明的企业，怎么会愿意做折本买卖？ 92 </p> 93 <p> 94 阿里现在的规模已足够大，护城墙也足够高，危险来自未来，如果不下足功夫研究，一旦被竞争对手掌握， 95 就有可能被秒杀。即使像腾讯这样规模的还面临从QQ到微信的惊险一跃，就跟苏宁和京东的竞争一样，一旦落后下去，就很难追赶了。 96 </p> 97 <p> 98 马云说贝尔、IBM的实验室曾经创造辉煌，可这种工业时代的实验室模式已经没落了。他认为达摩院科研的目标不仅仅是FUN， 99 也不仅是PROFIT，而是问题导向，以解决问题为目标。 100 </p> 101 <p> 102 达摩院似乎是一个独立经营个体，就像很多研发机构也能最终上市一样，马云要求达摩院能够独立经营维持下去。至于方法， 103 外人还很难猜测，科研机构一般要靠政府拨款，或者慈善捐助，当然也可以是订单式研发，转让专利技术。 104 </p> 105 <p> 106 有很多技术是得益于那些大企业的研发，比如数码相机，即使研发者被革了命，也是为人类做了贡献。应该记住的是， 107 即使那些传统企业没落了，他们留下的科研仍在；即使那些富豪不在了，他们留下的研究机构还在；比如卡耐基捐助的卡内基·梅隆大学， 108 洛克菲勒捐助的洛克菲勒大学，还有洛克菲勒基金会对科学所做的贡献。 109 </p> 110 <p> 111 （编辑：刘骏） 112 </div> 113 </body> 114 </html>
练习二：展开&闭合列表
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>展开&闭合列表 </title> 6 <style type="text/css"> 7 dl{ 8 font:color:#6699CC; 9 300px; 10 height:18px; 11 } 12 dl dt{ 13 font-weight:bold; 14 color:Green; 15 cursor:pointer; //设置手势 16 } 17 dl dd{ 18 margin:0px; 19 } 20 /* //预定义样式：便于标签样式的动态加载*/ 21 .open{ 22 height:130px;/*不设置的话，文字会重叠*/ 23 overflow:visible; 24 } 25 .close{ 26 overflow :hidden; 27 } 28 </style> 29 </head> 30 31 <body> 32 <script type="text/javascript"> 33 function show() { 34 var dtNode = window.event.srcElement; 35 var dlNode = dtNode.parentNode; 36 var dlNodes = document.getElementsByTagName("dl"); 37 for (var i = 0; i < dlNodes.length; i++) { 38 if (dlNodes[i] == dlNode) { //判断是否是当前点击的dl 39 if (dlNodes[i].className == "open") { 40 dlNodes[i].className = "close"; 41 } 42 else { 43 dlNodes[i].className = "open"; 44 } 45 } 46 else { 47 dlNodes[i].className = "close"; 48 } 49 } 50 } 51 </script> 52 <dl class="close"> 53 <dt onclick="show()"> 54 列表一 55 </dt> 56 <dd>列表内容sasasacsa</dd> 57 <dd>列表内容dafrfgrve</dd> 58 <dd>列表内容saspasl;a,</dd> 59 <dd>列表内容dsd9qwklms</dd> 60 <dd>列表内容sajsoiaya</dd> 61 </dl> 62 <dl class="close"> 63 <dt onclick="show()"> 64 列表二 65 </dt> 66 <dd>列表内容sasasacsa</dd> 67 <dd>列表内容dafrfgrve</dd> 68 <dd>列表内容saspasl;a,</dd> 69 <dd>列表内容dsd9qwklms</dd> 70 <dd>列表内容sajsoiaya</dd> 71 </dl> 72 <dl class="close"> 73 <dt onclick="show()"> 74 列表三 75 </dt> 76 <dd>列表内容sasasacsa</dd> 77 <dd>列表内容dafrfgrve</dd> 78 <dd>列表内容saspasl;a,</dd> 79 <dd>列表内容dsd9qwklms</dd> 80 <dd>列表内容sajsoiaya</dd> 81 </dl> 82 </body> 83 </html>
练习三：自动创建表格
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>自动创建表格</title> 6 <link rel="stylesheet" type="text/css" href="table.css" /> 7 </head> 8 9 <body> 10 <script type="text/javascript"> 11 var tabNum = 1; 12 function creTable(){ 13 /*原始方法： 14 //创建表格节点 15 var tabNode = document.createElement("table"); 16 //创建tbody节点 17 var tbdNode = document.createElement("tbody"); 18 //创建行节点tr 19 var trNode = document.createElement("tr"); 20 //创建单元格节点td 21 var tdNode = document.createElement("td"); 22 tdNode.innerHTML = "单元格内容"; 23 24 //让这些节点具有层次关系:组成一个表 25 tabNode.appendChild(tbdNode); 26 tbdNode.appendChild(trNode); 27 trNode.appendChild(tdNode); 28 */ 29 30 //新方法：使用表格节点自带的方法：insertRow() 31 //获取行列值 32 var rowNode = document.getElementsByTagName("input")[0]; 33 var celNode = document.getElementsByTagName("input")[1]; 34 if(rowNode.value==""|| rowNode.value==""){ 35 alert("数据不能为空！"); 36 } 37 else{ 38 var divNode = document.getElementsByTagName("div")[0]; 39 var x = rowNode.value; 40 var y = celNode.value; 41 //添加说明 42 var text = document.createElement("div"); 43 text.innerHTML = "[表格"+tabNum+"]:"+x+"x"+y; 44 tabNum++; 45 divNode.appendChild(text); 46 47 //添加表格 48 var tabNode = document.createElement("table"); 49 for(var i=1;i<=x;i++){//插入x行 50 var trNode = tabNode.insertRow(); 51 for(var j=1;j<=y;j++){//插入单元格：即列 52 var tdNode = trNode.insertCell(); 53 } 54 } 55 tabNode.id = tabNum-1; 56 divNode.appendChild(tabNode); 57 //添加一条下划线 58 var line = document.createElement("hr"); 59 divNode.appendChild(line); 60 } 61 } 62 //删除指定表格(该方法存在缺陷：没有删除表格上方的说明文字；没有做健壮性判断) 63 function delTable(){ 64 var tableNode = document.getElementsByTagName("input")[3]; 65 if(tableNode.value==""){ 66 alert("数据不能为空！"); 67 } 68 else{ 69 var tabId = tableNode.value; 70 var tabnumNode = document.getElementById(tabId); 71 tabnumNode.parentNode.removeChild(tabnumNode); 72 } 73 } 74 </script> 75 行：<input type="text" name="rownum"/> 76 列：<input type="text" name="colnum"/> 77 <input type="button" value="创建" onclick="creTable()" /> 78 <br/> 79 表格：<input type="text" name="tabnum"/> 80 <input type="button" value="删除" onclick="delTable()" /> 81 <hr/> 82 <div></div> 83 </body> 84 </html>
css文件：文件名为table.css
1 /* CSS Document */ 2 table{ 3 border:#33ff11 1px solid; 4 width:300px; 5 border-collapse:collapse; 6 } 7 table td{ 8 border:#663366 1px solid; 9 padding:10px; 10 } 11 table th{ 12 border:#6633ff 1px solid; 13 padding:10px; 14 background-color:rgb(100,200,300); 15 }
练习四：表格行高亮
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>行颜色间隔并高亮</title> 6 <link rel="stylesheet" href="table.css" /> 7 <style type="text/css"> 8 .one{ 9 background:#99CCFF; 10 } 11 .two{ 12 background:#FFFF99; 13 } 14 .over{ 15 background-color:#FF0000; 16 } 17 </style> 18 <script type="text/javascript"> 19 var name;//记录行的classname 20 /*设置行属性和行为*/ 21 function setRows(){ 22 //获取表格对象 23 var tabNode = document.getElementById("infoTab"); 24 //获取行 25 var rowsNode = tabNode.rows; 26 //从第二行开始遍历(不算表头) 27 for(var i=1;i<rowsNode.length;i++){ 28 if(i%2 == 1) 29 rowsNode[i].className = "one"; 30 else 31 rowsNode[i].className = "two"; 32 33 //设置完颜色，给行添加时间(行为) 34 rowsNode[i].onmouseover = function(){ 35 name = this.className; 36 this.className = "over";//高亮 37 } 38 rowsNode[i].onmouseout = function(){ 39 this.className = name;//还原 40 } 41 } 42 } 43 //在加载完成后调用方法： 44 window.onload = function(){ 45 setRows(); 46 } 47 </script> 48 </head> 49 <body> 50 <table id="infoTab"> 51 <tr> 52 <th>姓名</th> 53 <th>年龄</th> 54 <th>地址</th> 55 </tr> 56 <tr> 57 <td>张三</td> 58 <td>24</td> 59 <td>上海</td> 60 </tr> 61 <tr> 62 <td>李四</td> 63 <td>21</td> 64 <td>北京</td> 65 </tr> 66 <tr> 67 <td>王五</td> 68 <td>34</td> 69 <td>天津</td> 70 </tr> 71 <tr> 72 <td>小明</td> 73 <td>27</td> 74 <td>石家庄</td> 75 </tr> 76 <tr> 77 <td>小红</td> 78 <td>24</td> 79 <td>黑龙江</td> 80 </tr> 81 <tr> 82 <td>小强</td> 83 <td>23</td> 84 <td>合肥</td> 85 </tr> 86 <tr> 87 <td>诗朗诵</td> 88 <td>35</td> 89 <td>杭州</td> 90 </tr> 91 <tr> 92 <td>贝尔</td> 93 <td>38</td> 94 <td>纽约</td> 95 </tr> 96 </table> 97 </body> 98 </html>
练习五：表格排序
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>表格排序</title> 6 <link rel="stylesheet" type="text/css" href="table.css" /> 7 <style type="text/css"> 8 .over{ 9 background-color:#FF0000; 10 } 11 th a:link,th a:visited{ 12 text-decoration:none; 13 color:#0000FF; 14 } 15 </style> 16 <script type="text/javascript"> 17 var name;//记录行的classname 18 /*设置行属性和行为*/ 19 function setRows(){ 20 //获取表格对象 21 var tabNode = document.getElementById("infoTab"); 22 //获取行 23 var rowsNode = tabNode.rows; 24 //从第二行开始遍历(不算表头) 25 for(var i=1;i<rowsNode.length;i++){ 26 //给行添加时间(行为) 27 rowsNode[i].onmouseover = function(){ 28 name = this.className; 29 this.className = "over";//高亮 30 } 31 rowsNode[i].onmouseout = function(){ 32 this.className = name;//还原 33 } 34 } 35 } 36 //在加载完成后调用方法： 37 window.onload = function(){ 38 setRows(); 39 } 40 </script> 41 <script type="text/javascript"> 42 /*给表格排序 43 1、获取需要排序的行对象数组 44 2、按指定规则排序 45 3、将排好序的数组添加回表格 46 */ 47 var flag = true; 48 function sortTab(){ 49 //获取表格对象 50 var tabNode = document.getElementById("infoTab"); 51 //获取行 52 var rowsNode = tabNode.rows; 53 //定义临时容器存储要排序的行对象(其实存的是地址，排序的时候是排的行对象) 54 var tempRows = []; 55 for(var i=1;i<rowsNode.length;i++){ 56 tempRows[i-1] = rowsNode[i]; 57 } 58 //对临时容器排序 59 if(flag){ 60 mySort(tempRows); 61 //将排序的行对象添加回表格 62 for(var x=0;x<tempRows.length;x++){ 63 tempRows[x].parentNode.appendChild(tempRows[x]); 64 } 65 flag = false; 66 } 67 else{ 68 mySort(tempRows); 69 //将排序的行对象添加回表格 70 for(var x=tempRows.length-1;x>=0;x--){ 71 tempRows[x].parentNode.appendChild(tempRows[x]); 72 } 73 flag = true; 74 } 75 } 76 //数组排序 77 function mySort(arr){ 78 for(var x=0;x<arr.length-1;x++) 79 for(var y=x+1;y<arr.length;y++){ 80 if(arr[x].cells[1].innerHTML < arr[y].cells[1].innerHTML){ 81 var temp = arr[x]; 82 arr[x] = arr[y]; 83 arr[y] = temp; 84 } 85 } 86 } 87 88 </script> 89 </head> 90 <body> 91 <table id="infoTab"> 92 <tr> 93 <th>姓名</th> 94 <th><a href="javascript:void(0)" onclick="sortTab()">年龄</a></th> 95 <th>地址</th> 96 </tr> 97 <tr> 98 <td>张三</td> 99 <td>24</td> 100 <td>上海</td> 101 </tr> 102 <tr> 103 <td>李四</td> 104 <td>21</td> 105 <td>北京</td> 106 </tr> 107 <tr> 108 <td>王五</td> 109 <td>34</td> 110 <td>天津</td> 111 </tr> 112 <tr> 113 <td>小明</td> 114 <td>27</td> 115 <td>石家庄</td> 116 </tr> 117 <tr> 118 <td>小红</td> 119 <td>24</td> 120 <td>黑龙江</td> 121 </tr> 122 <tr> 123 <td>小强</td> 124 <td>23</td> 125 <td>合肥</td> 126 </tr> 127 <tr> 128 <td>诗朗诵</td> 129 <td>35</td> 130 <td>杭州</td> 131 </tr> 132 <tr> 133 <td>贝尔</td> 134 <td>38</td> 135 <td>纽约</td> 136 </tr> 137 </table> 138 </body> 139 </html>
练习六：全选&全不选&删除选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>全选&反选</title> 6 <style type="text/css"> 7 table{ 8 border:#33ff11 1px solid; 9 width:650px; 10 border-collapse:collapse; 11 text-align:center; 12 } 13 table td{ 14 border:#663366 1px solid; 15 padding:10px; 16 } 17 table th{ 18 border:#666666 1px solid; 19 padding:10px; 20 background-color:rgb(100,200,300); 21 } 22 .one{ 23 background-color:#CCCCFF; 24 } 25 .two{ 26 background-color:#FFFFCC; 27 } 28 .lastline{ 29 background-color:#0099FF; 30 } 31 .over{ 32 background:#CC3300; 33 } 34 h1{ 35 color:#00FF99; 36 } 37 </style> 38 <script type="text/javascript"> 39 var name; 40 //行间隔颜色设置 41 function setRows(){ 42 var otabNode = document.getElementById("mailTab"); 43 var orowNodes = otabNode.rows; 44 45 for(var x=1;x<orowNodes.length-1;x++){ 46 if(x%2 == 1) 47 orowNodes[x].className = "one"; 48 else 49 orowNodes[x].className = "two"; 50 //事件 51 orowNodes[x].onmouseover = function(){ 52 name = this.className; 53 this.className = "over";//高亮 54 } 55 orowNodes[x].onmouseout = function(){ 56 this.className = name;//还原 57 } 58 } 59 orowNodes[x].className = "lastline"; 60 } 61 //文档加载后执行： 62 window.onload = function(){ 63 setRows(); 64 } 65 66 //复选框的全选动作 67 function checkAll(node){ 68 //获取所有复选框 69 var mailNodes = document.getElementsByName("mail"); 70 for(var x=0;x<mailNodes.length;x++){ 71 mailNodes[x].checked = node.checked; 72 } 73 } 74 //单击按钮事件 75 function checkAllByBut(num){ 76 var mailNodes = document.getElementsByName("mail"); 77 for(var x=0;x<mailNodes.length;x++){ 78 if(num >= 1)//单选 79 mailNodes[x].checked = !mailNodes[x].checked; 80 else//全不选 81 mailNodes[x].checked = num; 82 } 83 } 84 //删除 85 function delMails(){ 86 var mailNodes = document.getElementsByName("mail"); 87 if(!confirm("是否删除所选邮件信息？")) 88 return; 89 for(var x=0;x<mailNodes.length;x++){ 90 if(mailNodes[x].checked){ 91 var rowNode = mailNodes[x].parentNode.parentNode;//获取行 92 rowNode.parentNode.removeChild(rowNode) 93 x--;//注意：这很关键，因为一旦remove，数组长度变短，但x却在自增，所以每remove一次需要自减一次 94 } 95 setRows();//更新行设置 96 } 97 } 98 </script> 99 </head> 100 <body> 101 <h1>email管理</h1> 102 <table id="mailTab"> 103 <tr> 104 <th><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</th> 105 <th>发件人</th> 106 <th>邮件名称</th> 107 <th>邮件附属信息</th> 108 </tr> 109 <tr> 110 <td><input type="checkbox" name="mail"/></td> 111 <td>张三</td> 112 <td>1oaoisasja@mail.com</td> 113 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 114 </tr> 115 <tr> 116 <td><input type="checkbox" name="mail"/></td> 117 <td>李四</td> 118 <td>1oaoisasja@mail.com</td> 119 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 120 </tr> 121 <tr> 122 <td><input type="checkbox" name="mail"/></td> 123 <td>王五</td> 124 <td>1oaoisasja@mail.com</td> 125 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 126 </tr> 127 <tr> 128 <td><input type="checkbox" name="mail"/></td> 129 <td>小明</td> 130 <td>1oaoisasja@mail.com</td> 131 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 132 </tr> 133 <tr> 134 <td><input type="checkbox" name="mail"/></td> 135 <td>杰克</td> 136 <td>1oaoisasja@mail.com</td> 137 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 138 </tr><tr> 139 <td><input type="checkbox" name="mail"/></td> 140 <td>不一样</td> 141 <td>1oaoisasja@mail.com</td> 142 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 143 </tr><tr> 144 <td><input type="checkbox" name="mail"/></td> 145 <td>王尼玛</td> 146 <td>1oaoisasja@mail.com</td> 147 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 148 </tr><tr> 149 <td><input type="checkbox" name="mail"/></td> 150 <td>全蛋</td> 151 <td>1oaoisasja@mail.com</td> 152 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 153 </tr><tr> 154 <td><input type="checkbox" name="mail"/></td> 155 <td>胡八一</td> 156 <td>1oaoisasja@mail.com</td> 157 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 158 </tr><tr> 159 <td><input type="checkbox" name="mail"/></td> 160 <td>匿名</td> 161 <td>1oaoisasja@mail.com</td> 162 <td>附属信息：wobuxinnihuiduwoxieleshenme</td> 163 </tr> 164 <tr> 165 <td><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</td> 166 <td><input type="button" value="全不选" onclick="checkAllByBut(0)"/></td> 167 <td><input type="button" value="反选" onclick="checkAllByBut(3)"/></td> 168 <td><input type="button" value="删除所选邮件" onclick="delMails()"/></td> 169 </tr> 170 </table> 171 </body> 172 </html>
练习七：性格测试
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>性格测试</title> 6 <style type="text/css"> 7 #no1ul{ 8 list-style:none; 9 margin:0px; 10 padding:0px; 11 } 12 .close{ 13 display:none; 14 } 15 .show{ 16 color:#990000; 17 } 18 </style> 19 <script type="text/javascript"> 20 function showTestResult(){ 21 var radioNodes = document.getElementsByName("answer"); 22 var resultNodes = document.getElementsByName("result"); 23 //健壮性判断 24 var flag = false; 25 for(var x=0;x<radioNodes.length;x++){ 26 if(radioNodes[x].checked){ 27 flag = true; 28 showOne(resultNodes[x]); 29 break; 30 } 31 } 32 if(!flag){ 33 showOne(resultNodes[4]); 34 } 35 } 36 //我们希望只显示一个测试结果 37 function showOne(node){ 38 var resultNodes = document.getElementsByName("result"); 39 for(var x=0;x<resultNodes.length;x++){ 40 //先全部close 41 resultNodes[x].className = "close"; 42 } 43 //再显示这个节点 44 node.className = "show"; 45 } 46 </script> 47 </head> 48 <body> 49 <h2>性格测试</h2> 50 <div> 51 <h3>问题</h3> 52 <span>每天下班回家一进门，你会怎样脱掉鞋子?</span> 53 <ul id="no1ul"> 54 <li><input type="radio" name="answer" value="1"/>A、很随意的脱下鞋子，不在乎如何摆放。</li> 55 <li><input type="radio" name="answer" value="2"/>B、脱下鞋后，把鞋尖朝向门外的方向整齐排好。</li> 56 <li><input type="radio" name="answer" value="3"/>C、脱下鞋后，把鞋尖朝屋内的方向整齐排好。</li> 57 <li><input type="radio" name="answer" value="4"/>D、不自己脱鞋，而是由同住在一起的人帮你脱下鞋子。</li> 58 </ul> 59 </div> 60 <div> 61 <input type="button" value="查看测试结果" onclick="showTestResult()"/> 62 <hr/> 63 <div id="a" name="result" class="close"> 64 A：这样的人，比较喜欢自由，认为生活舒适即可，不在意细节，完全不考虑社会体制和规则的类型，以追求自我欲望为中心。 65 较冲动，喜欢自由奔放的生活方式。比较自我的人，这种人是为了追求欲望而行动的类型，仍然持续幼儿时期的性格。 66 如果往好的方向发展，当然很好；但是，如果往坏的方向发展，结果会很令人惊叹。 67 </div> 68 <div id="b" name="result" class="close"> 69 B：这样的人很能吃苦，用自己的辛勤来享受生活。凡事都要准备得万全，是追求完美的人。容易在社会上树敌很多，对于同事也毫不放松。 70 他们会压抑感情，喜怒不形于色，遵守社会规范而行动。但是，这种人的心里面防卫防备很严，即使认为是为了社会公益而做的事情，也会引起很多的误解。 71 你的道德心和伦理感相当强烈，建议最好不要给自己过多的负担以免吃不消。 72 </div> 73 <div id="c" name="result" class="close"> 74 C：这样的人有自己的思考方式，有自己的做事风格，会适当地考虑方式方法，是办事周到的人。这样的人骄傲，但是又适度，所以会给人以成熟自信的感觉。 75 </div> 76 <div id="d" name="result" class="close"> 77 D：这样脱鞋方式的人，不用多说，一定是比较任性的人，与其说是任性，倒不如说是被完全惯坏了，因为周围的人都宠她，她要做的事情，都会由别人帮她做的很好， 78 不是说她自己没由能力，是因为她的依赖性很强，所以这样的人必须注意与周围环境的协调，否则终有一天吃大亏。 79 </div> 80 <div id="e" name="result" class="close"> 81 E：你很皮！ 82 </div> 83 </div> 84 </body> 85 </html>
练习八：下拉菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>下拉菜单</title> 6 <style type="text/css"> 7 .color{ 8 width:50px; 9 height:50px; 10 background-color:#993300; 11 float:left; 12 margin-bottom:20px; 13 } 14 div ul{ 15 margin:0px; 16 padding:0px; 17 margin-top:20px; 18 } 19 div ul li{ 20 list-style:none; 21 clear:left; 22 } 23 #changeColor{ 24 margin-top:20px; 25 } 26 </style> 27 <script type="text/javascript"> 28 //使用颜色块设置颜色 29 function setColor(node){ 30 var textNode = document.getElementById("text"); 31 textNode.style.color = node.style.backgroundColor; 32 } 33 34 //使用下拉框改变颜色 35 function changeColor(){ 36 //获取下拉框 37 var selNode = document.getElementById("changeColor"); 38 //下拉框选项 39 var optionsNode = selNode.options; 40 var textNode = document.getElementById("text"); 41 42 textNode.style.color = optionsNode[optionsNode.selectedIndex].style.color; 43 } 44 </script> 45 <script> 46 //下拉框2 47 function selectCity(){ 48 //获取要用到的对象 49 var selproNode = document.getElementById("selPro"); 50 var selcityNode = document.getElementById("selCity"); 51 var optionsNode = selcityNode.options; 52 var index = selproNode.selectedIndex; 53 //设置可选城市 54 /*方式一： 55 var arr1 = {"beijing":['海淀区','朝阳区','东城区','西城区']}; 56 var arr2 = {"hebei":['石家庄','邯郸','保定','秦皇岛']}; 57 var arr3 = {"shandong":['津南','青岛','烟台','日照']}; 58 var arr4 = {"henan":['郑州','洛阳','开封','平顶山']}; 59 */ 60 var arr0 = ["选择城市"]; 61 var arr1 = ['海淀区','朝阳区','东城区','西城区']; 62 var arr2 = ['石家庄','邯郸','保定','秦皇岛']; 63 var arr3 = ['津南','青岛','烟台','日照']; 64 var arr4 = ['郑州','洛阳','开封','平顶山']; 65 var arr = [arr0,arr1,arr2,arr3,arr4]; 66 //选择省市后添加对应城市 67 //注意：在添加前应该清空里面的内容！！！ 68 var cityArr = arr[index]; 69 for(var i=0;i<optionsNode.length;i++){ 70 optionsNode[i].parentNode.removeChild(optionsNode[i]); 71 i--;//重要 72 } 73 for(var x=0;x<cityArr.length;x++){ 74 var opt = document.createElement("option"); 75 var str = cityArr[x]; 76 opt.innerHTML = str; 77 selcityNode.appendChild(opt); 78 } 79 } 80 </script> 81 </head> 82 <body> 83 <h2>下拉框1</h2> 84 <div class="color" style="background-color:#FF0000" onclick="setColor(this)" id="col1"></div> 85 <div class="color" style="background-color:#00FF00" onclick="setColor(this)" id="col2"></div> 86 <div class="color" style="background-color:#0000FF" onclick="setColor(this)" id="col3"></div> 87 <div id="text"> 88 <ul> 89 <li>你见，或者不见我，我就在那里，不悲不喜；</li> 90 <li>你念，或者不念我，情就在那里，不来不去；</li> 91 <li>你爱，或者不爱我，爱就在那里，不增不减；</li> 92 <li>你跟，或者不跟我，我的手就在你手里，不舍不弃；</li> 93 <li>来我的怀里，或者，让我住进你的心里</li> 94 <li>默然 相爱 寂静 欢喜</li> 95 </ul> 96 </div> 97 <select id="changeColor" onchange="changeColor()"> 98 <option value="balck">选择颜色</option> 99 <option style="color:#FF0000">红色</option> 100 <option style="color:#00FF00">绿色</option> 101 <option style="color:#0000FF">蓝色</option> 102 </select> 103 <hr/> 104 105 <h2>下拉框2</h2> 106 <select id="selPro" onchange="selectCity()"> 107 <option value="sel">选择省市</option> 108 <option value="beijing">北京</option> 109 <option value="hebei">河北</option> 110 <option value="shandong">山东</option> 111 <option value="henan">河南</option> 112 </select> 113 <select id="selCity"> 114 <option>选择城市</option> 115 </select> 116 </body> 117 </html>
练习九：添加&删除附件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>添加&删除附件</title> 6 <style type="text/css"> 7 table a:link,table a:visited{ 8 color:#0000FF; 9 font-family:"Times New Roman", Times, serif; 10 text-decoration:none; 11 } 12 table a:hover{ 13 color:#CCCC00; 14 } 15 </style> 16 <script type="text/javascript"> 17 //添加附件 18 function addFile(){ 19 var tabNode = document.getElementById("myTab"); 20 var rowNode = tabNode.insertRow(); 21 //插入行 22 var celFileNode = rowNode.insertCell(); 23 var celbuttNode = rowNode.insertCell(); 24 celFileNode.innerHTML = "<input type='file'/>"; 25 celbuttNode.innerHTML = "<a href='javascript:void(0)' onclick='delFile(this)'>删除</a>"; 26 } 27 //删除附件 28 function delFile(node){ 29 var rowNode = node.parentNode.parentNode; 30 rowNode.parentNode.removeChild(rowNode); 31 } 32 </script> 33 </head> 34 <body> 35 <table id="myTab"> 36 <tr> 37 <td><a href="javascript:void(0)" onclick="addFile()">添加附件</a></td> 38 </tr> 39 <tr> 40 <td><hr/></td> 41 </tr> 42 </table> 43 </body> 44 </html>
联系十：表单检验
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>表单校验</title> 6 <style type="text/css"> 7 table{ 8 border:#006666 2px solid; 9 width:300px; 10 height:300px; 11 text-align:center; 12 } 13 </style> 14 <script type="text/javascript"> 15 //用户名提示 16 function usermes(){ 17 var userflag =false; 18 var userNode = document.getElementById("username"); 19 var name = userNode.value; 20 //定义正则表达式规则:有两种语法方法 21 var reg = new RegExp("^[a-z].{1,5}$","i"); 22 //var reg = /^[a-z]{4}$/; 23 var usermesNode = document.getElementById("usermes"); 24 //判断输入是否符合规则： 25 if(reg.test(name)){ 26 usermesNode.innerHTML = "用户名可用".fontcolor("green"); 27 flag = true; 28 } 29 else{ 30 usermesNode.innerHTML = "用户名必须以字母开头且长度在2-6之间".fontcolor("red"); 31 flag = false; 32 } 33 return flag; 34 } 35 //密码提示 36 function pswmes1(){ 37 var psw1flag =false; 38 var pswNode = document.getElementById("psw1"); 39 var name = pswNode.value; 40 //定义正则表达式规则:有两种语法方法 41 var reg = new RegExp("^.{2,10}$","i"); 42 //var reg = /^[a-z]{4}$/; 43 var pswmesNode = document.getElementById("pswmes1"); 44 //判断输入是否符合规则： 45 if(reg.test(name)){ 46 pswmesNode.innerHTML = "密码可用".fontcolor("green"); 47 psw1flag = true; 48 } 49 else if(name==""){ 50 pswmesNode.innerHTML = "密码不能为空".fontcolor("red"); 51 psw1flag = false; 52 } 53 else{ 54 pswmesNode.innerHTML = "密码长度必须为：2~10".fontcolor("red"); 55 psw1flag = false; 56 } 57 return psw1flag; 58 } 59 function pswmes2(){ 60 var psw2flag =false; 61 var psw1Node = document.getElementById("psw1"); 62 var name1 = psw1Node.value; 63 var psw2Node = document.getElementById("psw2"); 64 var name2 = psw2Node.value; 65 66 var pswmesNode = document.getElementById("pswmes2"); 67 //判断输入是否符合规则： 68 if(name1==name2){ 69 if(name2==""){ 70 pswmesNode.innerHTML = "密码不能为空".fontcolor("red"); 71 psw2flag = false; 72 } 73 else{ 74 pswmesNode.innerHTML = "输入一致".fontcolor("green"); 75 psw2flag = true; 76 } 77 } 78 else{ 79 pswmesNode.innerHTML = "两次密码输入不一致".fontcolor("red"); 80 psw2flag = false; 81 } 82 return psw2flag; 83 } 84 //提交校验 85 function checkForm(){ 86 var formflag; 87 var psw1Node = document.getElementById("submes"); 88 if(usermes() && psw1mes() && psw2mes()){ 89 alert("提交成功"); 90 formflag = true; 91 } 92 else{ 93 alert("输入有误，无法提交"); 94 formflag = false; 95 } 96 return formflag; 97 } 98 </script> 99 </head> 100 <body> 101 <h2>新用户注册</h2> 102 <form onsubmit="return checkForm()"> 103 <table id="userTab"> 104 <tr> 105 <td>用户名称：<input type="text" id ="username" onblur="usermes()"/></td> 106 </tr> 107 <tr> 108 <td id="usermes"></td> 109 </tr> 110 <tr> 111 <td>密 码：<input type="password" id ="psw1" onblur="pswmes1()"/></td> 112 </tr> 113 <tr> 114 <td id="pswmes1"></td> 115 </tr> 116 <tr> 117 <td>确认密码：<input type="password" id ="psw2" onblur="pswmes2()"/></td> 118 </tr> 119 <tr> 120 <td id="pswmes2"></td> 121 </tr> 122 </table> 123 <input type="submit" value="确认注册" style="font-size:16px"/> 124 </form> 125 </body> 126 </html>