欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-20 16:26:46
大概实现思路就是用一张灰色的星星作为背景,然后让有颜色的星星图片定位在灰色的星星图片上,控制有颜色星星图片的宽度即可达到基本效果。如下图: 下面上代码:...

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

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实现简单的星星评分效果

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