首頁 > 開發者 > JavaScript
前言:下面我們接著旅程7繼續我們的JavaScript Dom征程8。在這篇部落格中我們還是繼續書寫我們控制層的練習代碼，在這篇部落格中我會實現這幾個功能點，第一個就是評等控制項的實現，現在很多網站都有這個功能，就是你寫了一個部落格，讓別人給你評論，還有滑鼠的移動的一些知識點及文字框的提示資訊等技術
(1)練習3：評等控制項v2。用一個單行5列的table，td中預設都是startEmpty.jpg這個圖片,監聽td的mouseover事件，滑鼠在一個td的時候將這個td以及之前的td的內容換成starFill.jpg這張圖片。滑鼠在評等控制項上的時候顯示顯示超連結形式的滑鼠圖示
1 <script type="text/javascript"> 2 3 function indexOf(arrr, element) { 4 5 for (var i = 0; i < arrr.length; i++) { 6 7 if (arrr[i] == element) { 8 9 return i;10 11 }12 13 }14 15 return -1;16 17 }18 19 function initEvent() {20 21 var rating = document.getElementById("rating");22 23 var tds = document.getElementsByTagName("td");24 25 for (var i = 0; i < tds.length; i++) {26 27 var td = tds[i];28 29 td.style.cursor = "pointer";30 31 td.onmouseover = function () {32 33 var rating = document.getElementById("rating");34 35 var tds = document.getElementsByTagName("td");36 37 var index = indexOf(tds, this);38 39 for (var i = 0; i <= index; i++) {40 41 tds[i].innerText = '★';42 43 }44 45 for (var i = index + 1; i < tds.length; i++) {46 47 tds[i].innerText = '☆';48 49 }50 51 };52 53 }54 55 }56 57 </script>58 59 <body onload="initEvent()">60 61 <table id="rating">62 63 <tr>64 65 <td>☆</td>66 67 <td>☆</td>68 69 <td>☆</td>70 71 <td>☆</td>72 73 <td>☆</td>74 75 <td>☆</td>76 77 </tr>78 79 </table>80 81 </body>
(2) 練習4：介面上有幾個球隊的名字的列表，將滑鼠放在球隊名字上就變成紅色背景，其他球隊背景顏色為白色，點擊一個球隊的時候就將點擊的球隊變成fontSize=30字型。
1 <script type="text/javascript"> 2 3 function initEvent() { 4 5 var football = document.getElementById("football"); 6 7 var lis = football.getElementsByTagName("li"); 8 9 for (var i = 0; i < lis.length; i++) {10 11 var li = lis[i];12 13 li.onmouseover = function () {14 15 var football = document.getElementById("football");16 17 var lis = football.getElementsByTagName("li");18 19 for (var i = 0; i < lis.length; i++) {20 21 var li = lis[i];22 23 if (li == this) {24 25 li.style.background = "red";26 27 }28 29 else {30 31 li.style.background = "white";32 33 }34 35 }36 37 }38 39 li.onclick = function () {40 41 this.style.fontSize = 30;42 43 }44 45 }46 47 }48 49 </script>50 51 <body onload="initEvent()">52 53 <ul id="football">54 55 <li>美國</li>56 57 <li>韓國</li>58 59 <li>朝鮮</li>60 61 <li>國足</li>62 63 <li>俄羅斯</li>64 65 </ul>66 67 </body>
(3)練習5：有一個搜尋文字框，焦點不再文字框中的時候，如果文字框沒有值，則文字框顯示為灰色文本(Gray)的“輸入搜尋索引鍵”，否則顯示使用者輸入的值；焦點在文字框中時如果之前顯示”輸入搜尋索引鍵”，則清空文字框的值，並且將文本修改為黑色。Onfocus的時候如果文字框中的值為”輸入搜尋索引鍵”，則清空文字框，並且恢複文字框中的顏色為Black，onblur的時候如果文字框中沒有值，則將文字框的值設定為”輸入搜尋索引鍵”並且文字框中顯示灰色文本(Gray)，style.color=’Gray’
1 <script type="text/javascript"> 2 3 function inputBlur(keyword) { 4 5 if (keyword.value.length <= 0) { 6 7 keyword.value = "請輸入搜尋索引鍵"; 8 9 keyword.style.color = "Gray";10 11 }12 13 }14 15 function inputFocus(keyword) {16 17 if (keyword.value == '請輸入搜尋索引鍵') {18 19 keyword.value = '';20 21 keyword.style.color = "black";22 23 }24 25 }26 27 </script>28 29 <input onblur="inputBlur(this)" onfocus="inputFocus(this)" id="keyword" value="請輸入搜尋索引鍵" style="color:Gray" />30 31 <input type="button" value="搜尋一下" />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
