DOMJavaScript示例练习
2024-04-21 12:02:39
以下示例均为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 width: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)" οnclick="changeFont('max')">大字体</a>
40 <a href="javascript:void(0)" οnclick="changeFont('mid')">中字体</a>
41 <a href="javascript:void(0)" οnclick="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>View Code
练习二：展开&闭合列表
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 width: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 οnclick="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 οnclick="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 οnclick="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>View Code
练习三：自动创建表格
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="创建" οnclick="creTable()" />
78 <br/>
79 表格：<input type="text" name="tabnum"/>
80 <input type="button" value="删除" οnclick="delTable()" />
81 <hr/>
82 <div></div>
83 </body>
84 </html>View Code
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 }tables.css
练习四：表格行高亮
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>View Code
练习五：表格排序
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>View Code
练习六：全选&全不选&删除选择
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>View Code
练习七：性格测试
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>View Code
练习八：下拉菜单
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>View Code
练习九：添加&删除附件
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)' οnclick='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>View Code
联系十：表单检验
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>View Code
转载于:https://www.cnblogs.com/fzz9/p/7772841.html
DOMJavaScript示例练习相关推荐
- .net连接mysql数据_.net连接MYSQL数据库的方法及示例！
连接MYSQL数据库的方法及示例 方法一: 使用MYSQL推出的MySQL Connector/Net is an ADO.NET driver for MySQL 该组件为MYSQL为ADO.NET ...
- CPU Cache原理与示例
CPU Cache原理与示例 基础知识 现在的 CPU 多核技术,都会有几级缓存,老的 CPU 会有两级内存(L1 和 L2),新的CPU会有三级内存(L1,L2,L3 ),如下图所示: 其中: ...
- 编译器 llvm clang 源码转换示例
编译器 llvm clang 源码转换示例 从git获取llvm项目的源码方式: git clone https://github.com/llvm/llvm-project.git 下载源码后,进入 ...
- Cache Memory技术示例
Cache Memory技术示例 为什么需要cache?如何判断一个数据在cache中是否命中?cache的种类有哪些,区别是什么? 为什么需要cache memory 先思考第一个问题:程序是如何运 ...
- Swift与LLVM-Clang原理与示例
Swift与LLVM-Clang原理与示例 LLVM 学习 从 简单汇编基础 到 Swift 不简单的 a + 1 作为iOS开发,程序崩溃犹如家常便饭,秉着没有崩溃也要制造崩溃的原则 每天都吃的很饱 ...
- C语言与OpenCL的编程示例比较
C语言与OpenCL的编程示例比较 OpenCL支持数据并行,任务并行编程,同时支持两种模式的混合.对于同步 OpenCL支持同一工作组内工作项的同步和命令队列中处于同一个上下文中的 命令的同步. 在 ...
- OpenCL框架与示例
OpenCL框架与示例 下面的图简单说明了OpenCL的编程框架,图是用的GPU,其他类似: 名词的概念: Platform (平台):主机加上OpenCL框架管理下的若干设备构成了这个平台,通过这个 ...
- ONNX MLIR应用示例（含源码链接）
ONNX MLIR应用示例(含源码链接) 开放式神经网络交换在MLIR中的实现 (http://onnx.ai/onnx-mlir/). Prebuilt Containers 开始使用ONNX-ML ...
- TVM apps extension示例扩展库
TVM apps extension示例扩展库 此文件夹包含TVM的示例扩展库.演示了其它库如何在C++和Python API中扩展TVM. 该库扩展了TVM的功能. python模块加载新的共享库, ...
最新文章
- apc220使用心得
- php 获取服务器,PHP 获取服务器详细信息
- Linux调用外部服务出现java.net.UnknownHostException
- 向mvc controller传递json数组
- 『转』数据库的委托之类型分类处理
- Android Studio 2.2 HTTP proxy setting 提示异常
- cocoscreator3d 获取mesh 大小_Cocos Creator 3D 粒子系统初战： 不要钱的酷炫火焰拿走不谢!...
- Ajax.Net之数据类型
- 经典数学书目、各数学分支入门清单
- mssql 存储过程 group by 集合并逗号要开某字段
- A2DP和AVRCP蓝牙音频传输协议
- 搭建Linux环境学习C语言
- 华为交换机各种配置实例（2）
- 《亲密关系》笔记（1）
- 随机预言机模型与标准模型
- U3D性能优化之MeshBaker(带光照)
- 产品推广都有哪些方法可以用？
- Phython是什么？
- MAC 网速问题 变慢 的来看看 经验
- 泛函分析之集合的映射和可数集与不可数集
热门文章
- java图片查看器下载_java照片查看器源代码
- python中sort和sorted区别_Python中的 sort 和 sorted的用法与区别
- android 设置允许http请求_接口测试第6期：Fiddler设置开始捕获和停止捕获、HTTP报文结构，如何删除请求...
- python 怎么设置背景为白色_pycharm怎么将背景颜色设置成白色？
- 计算机报名忻州考点,2020山西省考忻州考区考点安排
- Android mock for循环,Android单元测试（五）：依赖注入，将mock方便的用起来
- mysql 闪回到指定时间_oracle数据库表恢复到特定时间点
- Ngnix笔记proxy_set_header设置X-Real-IP（Java获取客户端IP地址）
- QML笔记-Particle的基本使用（粒子系统的基本使用）
- 加固工程验收规范50550_轻质隔墙怎样做才规范，看完这3点