This example for you to share a similar Taobao and Baidu Library scoring function, JS implementation, for your reference, the specific content as follows
Effect as shown:
Five pentagram are placed in the five columns of a table respectively. The following is a <p>, used to show the results of the score, the code is as follows:
<body onload= "CHANGEBG ()" > <table border= "0" align= "center" cellpadding= "0" cellspacing= "0" id= " Maintable "> <tr style=" font-size:30px; > <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆ </td> </tr> </table> <p align= "center" id= "Result" > your comments on <label id= "score" ></label>-</p> </body>
The body of the OnLoad event binding is a method, the JS code is as follows:
<script type= "Text/javascript" > Function GetIndex (arr,element) {//parameter: array, element; Returns the index for the sibling element for (var i = 0; i ; Arr.length;
i++) {if (arr[i] = = Element) {return i;
}} return-1; The function changebg () {//per TD setting gets the Focus property "can also set the OnClick property" var maintable = document.getElementById ("maintable"); Get the form you want to set var TDS = Maintable.getelementsbytagname ("TD"); Gets all cell document.getElementById ("result") under the table. Style.display = "None";
Set the score result to hidden for (var i = 0; i < tds.length i++) {var td = Tds[i];
Td.onfocus = Getonfocus; Td.style.cursor = "pointer"; In order to set the mouse on the pentagram on the hand type}} function Getonfocus () {//Set TD's Focus event, var maintable = document.getElementById ("Maintab
Le ");
var tds = Maintable.getelementsbytagname ("TD"); var index = GetIndex (TDS, this); Returns the index of the response event with this represents the element document.getElementById ("result") that triggered the event. Style.display = "";
When the score is obtained, the results are displayed document.getElementById ("Score"). innertext = index + 1; for (var i = 0; i < index+1;
i++) {Tds[i].style.color = "red";
for (var i = index+1 i < tds.length; i++) {Tds[i].style.color = ' black ';
}} </script>
JS code mainly consists of three functions;
①:CHANGEBG ();the OnLoad event binding function of the body; In order to implement the binding onfocus event for each TD element;
②:getonfocus (), TD element onfocus event's concrete realization;
③:getindex () , there are two parameters, one is a collection of TD elements array, one is the corresponding event TD element, note the use of the This keyword. The index of the element that mainly returns the corresponding event, in order to display the color before the response event element as red, and the following element to appear black;
The above is the entire content of this article, I hope to learn JavaScript program to help you.
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
