Detailed explanation of examples of JS completing the star rating function-JS Tutorial-php.cn

Detailed explanation of examples of JS completing the star rating function

Y2J

Release： 2017-05-20 13:19:51

Original

2337 people have browsed it

This article mainly introduces JavaScript to achieve a simple star rating effect in detail. It has a certain reference value. Interested friends can refer to it.

The general idea of implementation is to use a gray Use the stars as the background, then position the colored star pictures on the gray star pictures, and control the width of the colored star pictures to achieve the basic effect. As shown below:

#The code below:

<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>星星</title> 
  <style> 
    .starnone,.starWrap{ 
      width: 100px; 
      height: 20px; 
    } 
    .starnone{ 
      position: relative; 
      background: url(stars-none20px.png) no-repeat; 
    } 
    .star{ 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 70%; 
      height: 20px; 
      background: url(stars20px.png) no-repeat; 
    } 
    #num{ 
      width: 30px; 
    } 
  </style> 
</head> 
<body> 
  <p class="starnone"> 
    <p class="starWrap"> 
      <p class="star" id="star"></p> 
    </p> 
  </p> 
  <p> 
    <input type="text" id="num"> % 
    <button id="ok">OK</button> 
  </p> 
  <script> 
    window.onload = function(){ 
      var star = document.getElementById("star"); 
      var okBtn = document.getElementById("ok"); 
      var num = document.getElementById("num"); 
      okBtn.onclick = function(){ 
        var value = parseFloat(num.value); 
        if (value>100) { 
          alert("请小于100"); 
          return; 
        } else if(value<0){ 
          alert("请大于0"); 
          return; 
        } 
        star.style.width = value + "px"; 
      } 
    } 
  </script> 
</body> 
</html>

Copy after login

The two pictures used.

【Related recommendations】

1. Javascript Free Video Tutorial

2. How does JS determine whether text is full-width or half-width?

3. nodejs+websocket completes a chat system function

4. Js completes the countdown time difference effect

5. Detailed explanation of the method of recursively deleting elements in an array in JS

The above is the detailed content of Detailed explanation of examples of JS completing the star rating function. For more information, please follow other related articles on the PHP Chinese website!