DDR爱好者之家

JavaScript实现简单的星星评分效果
站长资源 2024/11/27 佚名
63 1538
DDR爱好者之家 Design By 杰米

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

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

下面上代码：

<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>

用到的两个图片。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米