Home > Developer > JavaScript
Next we will go on journey 7 to continue our JavaScript Dom journey 8. In this blog, we continue to write the practice code at the control layer. In this blog, I will implement these functions. The first one is the implementation of the scoring control, many websites now have this function, that is, you write a blog to let others give you comments, as well as some tips for moving the mouse and text box prompts and other technologies.
(1) Exercise 3: score control v2. Upload this image. Displays the hyperlink-style Mouse icon when you move the mouse over the score control.
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) Exercise 4: there is a list of several team names on the page. Move the mouse over the team name and the team name becomes a red background. The background color of other teams is white, when you click a team, the team you click will be changed to 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> us </li> 56 57 <li> South Korea </li> 58 59 <li> North Korea </ li> 60 61 <li> guozu </li> 62 63 <li> Russia </li> 64 65 </ul> 66 67 </body>
(3) Exercise 5: There is a search text box. when the focus is no longer in the text box, if the text box does not have a value, the text box displays the "Enter search keyword" of the Gray text ", otherwise, the value entered by the user is displayed. If "Enter search keyword" is displayed before the focus is in the text box, the value of the text box is cleared and the text is changed to black. In Onfocus, if the value in the text box is "Enter search keyword", the text box is cleared, and the color in the text box is restored to Black. In onblur, if there is no value in the text box, set the value of the text box to "Enter search keywords" and the text box to show Gray and style. color = 'Gray'
1 <script type = "text/javascript"> 2 3 function inputBlur (keyword) {4 5 if (keyword. value. length <= 0) {6 7 keyword. value = "Enter the search keyword"; 8 9 keyword. style. color = "Gray"; 10 11} 12 13} 14 15 function inputFocus (keyword) {16 17 if (keyword. value = 'Enter the search keyword ') {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 =" Enter the search keyword "style =" color: Gray "/> 30 31 <input type =" button "value =" Search "/>
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
