This morning, I took the time to write a star rating and shared it with you. Due to the limited level, please note if you have any problems.
First, you must prepare a star image. The gray color indicates the default state, and the yellow color indicates the selected state.
Code Attached:
Copy codeThe Code is as follows: <! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> javascript star rating </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
. Wrapper {height: 20px; padding: 5px; width: 130px; margin: 100px auto 10px ;}
A {float: left; width: 26px; height: 20px; background: url(star.png) 0-20px no-repeat ;}
P {font: 24px SimSun; width: 130px; margin-left: auto; margin-right: auto ;}
</Style>
</Head>
<Body>
<Div class = "wrapper">
<A href = "javascript:;"> </a>
<A href = "javascript:;"> </a>
<A href = "javascript:;"> </a>
<A href = "javascript:;"> </a>
<A href = "javascript:;"> </a>
</Div>
<P> </p>
</Body>
</Html>
<Script type = "text/javascript">
Window. onload = function (){
Var star = document. getElementsByTagName ('A ');
Var oDiv = document. getElementsByTagName ('div ') [0];
Var temp = 0;
For (var I = 0, len = star. length; I <len; I ++ ){
Star [I]. index = I;
Star [I]. onmouseover = function (){
Clear ();
For (var j = 0; j <this. index + 1; j ++ ){
Star [j]. style. backgroundPosition = '0 0 ';
}
}
Star [I]. onmouseout = function (){
For (var j = 0; j <this. index + 1; j ++ ){
Star [j]. style. backgroundPosition = '0-20px ';
}
Current (temp );
}
Star [I]. onclick = function (){
Temp = this. index + 1;
Document. getElementsByTagName ('P') [0]. innerHTML = temp + 'start ';
Current (temp );
}
}
// Clear all
Function clear (){
For (var I = 0, len = star. length; I <len; I ++ ){
Star [I]. style. backgroundPosition = '0-20px ';
}
}
// Display the current star number
Function current (temp ){
For (var I = 0; I <temp; I ++ ){
Star [I]. style. backgroundPosition = '0 0 ';
}
}
};
</Script>
Attached
PS: I am bored. I learned some javascript knowledge to write some effects at will.
