JavaScript实现简单的星星评分效果

网络编程 2025/1/31 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

大概实现思路就是用一张灰色的星星作为背景，然后让有颜色的星星图片定位在灰色的星星图片上，控制有颜色星星图片的宽度即可达到基本效果。如下图：

下面上代码：

<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> 
 <div class="starnone"> 
  <div class="starWrap"> 
   <div class="star" id="star"></div> 
  </div> 
 </div> 
 <div> 
  <input type="text" id="num"> % 
  <button id="ok">OK</button> 
 </div> 
 <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>

用到的两个图片。