Today to achieve the next star rating, behind and with the evaluation of the text.
The HTML code is as follows:
<spanclass= "Star"> <bclass= "Ct-star Ic-star-off"></b> <bclass= "Ct-star Ic-star-off"></b> <bclass= "Ct-star Ic-star-off"></b> <bclass= "Ct-star Ic-star-off"></b> <bclass= "Ct-star Ic-star-off"></b></span><spanclass= "Star-txt"></span>
The CSS is as follows:
{ display: inline-block; margin: 0 1px; width: 19px; height: 19px; background: url (img/stars.png) no-repeat; vertical-align: -2px; cursor: pointer; } { background-position: -39px 0; }
JS as follows:
<script>window.onload=function(){ varAspan=document.getelementsbyclassname ("star") [0]; varAstxt=document.getelementsbyclassname ("Star-txt") [0]; varAbstar=aspan.getelementsbytagname ("B"); varArrbtxt=["Poor", "poor", "OK", "recommended", "recommend"]; varNum=0; varonoff=true; for(varI= 0;i<abstar.length;i++) {Abstar[i].index=i; //Mouse Move inAbstar[i].onmouseover=function(){ if(onOff) {num= This. Index; Astxt.innerhtml=Arrbtxt[num]; for(vari = 0; I <= This. Index; i++) {abstar[i].style.backgroundposition= "0 0"; } } }; //Mouse move awayabstar[i].onmouseout=function(){ if(ONOFF) {//set a switch, wait for the switch to be true to execute the mouse-removed codeAstxt.innerhtml= ""; for(vari=0;i<= This. index;i++) {abstar[i].style.backgroundposition= " -39px 0"; } } }; //Mouse clickabstar[i].onclick=function() {onOff=false;//The switch is false and the mouse removal code is not executed //Clear First .Astxt.innerhtml= ""; for(vari=0;i<abstar.length;i++) {abstar[i].style.backgroundposition= " -39px 0"; } //Click on the current star, the previous ones are lit to include their ownnum = This. Index; Astxt.innerhtml=Arrbtxt[num]; for(vari=0;i<= This. index;i++) {abstar[i].style.backgroundposition= "0 0"; } }; } }</script>
The code works as follows:
Native JS Implementation star rating