DOM&JavaScript示例&练习

时间：2017-11-03 14:15:29 阅读：420 评论：0 收藏：0 [点我收藏+]

以下示例均为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)" 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>

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

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     &nbsp;&nbsp;&nbsp;&nbsp;行：<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>

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

练习六：邮件列表

练习七：性格测试

练习八：下拉菜单

练习九：添加&删除附件

联系十：表单检验

DOM&JavaScript示例&练习

标签：手势 flow 地址洛克菲勒 doc 帮助正是 false 竞争

原文地址：http://www.cnblogs.com/fzz9/p/7772841.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行