Home > Article > Web Front-end > Detailed explanation of examples of JS completing the star rating function

Detailed explanation of examples of JS completing the star rating function

Y2JOriginal: 2017-05-20 13:19:512308browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Js complete countdown time difference effectNext article：Js complete countdown time difference effect

See more

Detailed explanation of examples of JS completing the star rating function

Related articles