温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-04-25 09:46:02 来源:亿速云 阅读:354 作者:小新 栏目:web开发

这篇文章给大家分享的是有关JavaScript如何实现简单的星星评分效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

Java有哪些集合类

Java中的集合主要分为四类:1、List列表:有序的,可重复的;2、Queue队列:有序,可重复的;3、Set集合:不可重复;4、Map映射:无序,键唯一,值不唯一。

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

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

感谢各位的阅读!关于“JavaScript如何实现简单的星星评分效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI