當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

DOMJavaScript示例练习

發布時間：2025/3/15 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 DOMJavaScript示例练习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

以下示例均為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

練習二：展開&閉合列表

練習三：自動創建表格

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

練習七：性格測試

練習八：下拉菜單

練習九：添加&刪除附件?

聯系十：表單檢驗

轉載于:https://www.cnblogs.com/fzz9/p/7772841.html

總結

以上是生活随笔為你收集整理的DOMJavaScript示例练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。