This article shares the scoring functions similar to Taobao and Baidu Library, and the js implementation is for your reference. The specific content is as follows
The effect is shown in the picture:
The five five-pointed stars are placed in the five columns of a table. The following is a <p> used to display the score results; the code is as follows:
<body onload="changebg()"> <table align="center" cellpadding="0" cellpacing="0" id="maintable"> <tr style="font-size:30px;"> <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td> </tr> </table> <p align="center" id="result">You have evaluated <label id="score"></label>points</p></body>
The body's onload event is bound to a method, and the js code is as follows:
<script type="text/javascript"> function getindex(arr,element) { //Arguments: array, element; return the index of the sibling element for (var i = 0; i < arr.length; i++) { if (arr[i] == element) { return i; } } return -1; } function changebg() { //Set each td to get the focus attribute [you can also set the onclick attribute] var maintained = document.getElementById("maintable"); //Get the table that needs to be set var tds = maintained.getElementsByTagName("td"); //Get all cells in the table document.getElementById("result").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"; //To set the mouse to be hand-shaped on the pentagram } } function getonfocus(){ //Set the focus event of td, var maintainable = document.getElementById("maintable"); var tds = maintainable.getElementsByTagName("td"); var index = getindex(tds, this); //Return the index of the response event this represents the element that triggered this event document.getElementById("result").style.display = ""; //After getting the score, display the result 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>The js code mainly consists of three functions;
①: changebg(); a function that binds the onload event of the body; in order to achieve binding of the onfocus event to each td element;
②: getonfocus(); the specific implementation of the onfocus event of the td element;
③: getindex(); There are two parameters, one is the collection array of td elements, and the other is the td element of the corresponding event. Pay attention to using this keyword. It mainly returns the index of the elements of the corresponding event. In order to display the color before the response event element as red, the subsequent elements are displayed as black;
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.