JS to achieve star scoring function instance code (two methods) _javascript skills

One, Method 1

1, use the picture

2. Structure and Style

 <!
 DOCTYPE html>  
 

Li adds the light class will become the bright Star, is changing the background position, turns the hollow star to the solid. So when the JS implementation of the light is to Li add a light class name.

Effect:

3, Interactive JS

<script>
var num=finalnum = tempnum= 0;
var lis = document.getelementsbytagname ("li");
Num: Pass in the number of lit stars
//finalnum: The number of stars that eventually lit
//tempnum: An intermediate value
function fnshow (num) {
 finalnum= num | | tempnum;//if the number of NUM passed in is 0, then Finalnum takes Tempnum value for
 (var i = 0; i < lis.length; i++) {
  lis[i].classname = i < fina Lnum? "Light": ""//Light star is added class for light style
 }} for
(var i = 1; I <= lis.length; i++) {
 lis[i-1].index = i;
 Lis[i-1].onmouseover = function () {//mouse over light stars.
  fnshow (This.index);//The value passed in is positive, that is finalnum
 }
 Lis[i-1].onmouseout = function () {//When the mouse leaves the star darkens
  fnshow (0);//Incoming value is 0,finalnum to Tempnum, initially 0
 }
 lis[i-1]. onclick = function () {//mouse clicks, while calling onmouseout, changing tempnum value to light stars
  tempnum= this.index;
 }
</script>

This design is a key point is that mouout save a value for the stars to darken, the initial 0 (0 stars Brighten is all dark), do not click on the words as long as the mouse left all the stars are dark, click event will trigger a mouseover and a mouseout, So when you click Change Tempnum to make sure that the mouse leaves a few stars, this value will remain until the next time you click to change it.

Final effect:

Two, Method 2

1, use the picture

2, the effect is as follows

3, the complete code is as follows

<! DOCTYPE html>  

4. Principle

4.1html structure

<div id= "Scoremark" class= "Scoremark scores" >
      <em class= "score" >8.0</em>
      <span class= " Star ">
       <span class=" Ystar "style=" width:80% "></span>
       <ul>
        <li><a href=" Javascript:void (0) "data-name=" very poor "class=" One-star ">1</a></li>
        <li><a href=" Javascript:void (0) "data-name=" poor "class=" Two-stars ">2</a></li>
        <li><a href=" Javascript:void (0) "Data-name=" General "class=" Three-stars ">3</a></li>
        <li><a href=" Javascript:void (0) "data-name=" Better "class=" Four-stars ">4</a></li>
        <li><a href=" Javascript:void (0) "data-name=" good "class=" Five-stars ">5</a></li>
       </ul>
      </span >
      <div style= "left:0px display:none;" class= "Tips" ></div>
   </div>

The principle of simple description: The coverage relation of the main layer background

First is the structure:. Star below contains two layers, one layer is ystar, one layer is UL.

4.1, the achievement of 4 stars scoring effect

The outer layer. Star is set wide and the background is a hollow gray star.

Inside. Ystar represents a lit star, its background is a solid yellow star, if there are 4 bright stars, set. The width of the Ystar is 80%. 2 stars of 40%.

4.2, the realization of the mouse hover up the star light effect

Mainly through the CSS control. The key is achieved by: hover.

The ul:hover is accompanied by a white-gray star background image.

When a:hover, the width becomes the width of the first few stars.

So in the hover, there are actually 4 layers of background, such as the second star hover, from bottom to top in turn is

. Star Dark Star 100% width. Ystar Bright Star 80 width ul Dark Star 100% width. two-stars 40% Width

4.3, mouse hover display tip

Through JS to obtain a data-name implementation.

The above is a small set of JS to introduce the Star scoring function example code (two methods) detailed content, hope to be helpful to everyone, if you have any questions welcome to my message, small series will promptly reply to everyone, here also thank you for the cloud Habitat Community website support!