JS实现星级评分

 

 

复制代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>评星</title>
    <style type="text/css">
    .start ul li{
      width:50px;height:50px;
      display: inline-block;
      list-style: none;
      background-image: url('https://www.cnblogs.com/images/cnblogs_com/cat-eol/1452109/o_start.png');
      background-size: 100% 100%;
    }
    .start ul .startBg{
      background-image: url('https://www.cnblogs.com/images/cnblogs_com/cat-eol/1452109/o_start2.png');
    }
    </style>
  </head>
  <body>
    <div class="start">
      <ul class="startUl">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <h3 id="pingfen">暂无评价</h3>
    <script type="text/javascript">
      var startUl=document.getElementsByClassName('startUl')[0];
      var arr=startUl.children;
      var i;
      for(var i=0;i<arr.length;i++){
        arr[i].index=i;
        arr[i].onmouseover=function(e){
          // 清空
          for(var i=0;i<arr.length;i++){
            arr[i].className='';
            pingfen.innerHTML='暂无评价'
          }
          var number=this.index+1;//星星高亮个数
          //方法一
          var pingArr=['评价20分','评价40分','评价60分','评价80分','评价满分'];
          for (var i = 0; i < pingArr.length; i++) {
              pingfen.innerHTML=pingArr[number-1];
          }
          //方法二
          // if(number==5){
          //   pingfen.innerHTML='评价满分'
          // }else if (number==4) {
          //   pingfen.innerHTML='评价80分'
          // }
          // else if (number==3) {
          //   pingfen.innerHTML='评价60分'
          // }
          // else if (number==2) {
          //   pingfen.innerHTML='评价40分'
          // }
          // else if (number==1) {
          //   pingfen.innerHTML='评价20分'
          // }
          for(var i=0;i<=this.index;i++){
              // this.setAttribute("class", "startBg");
              arr[i].className='startBg';
          }
        }
      }

    </script>

  </body>
</html>
复制代码

 

 

星星图片来源于https://www.iconfont.cn/search/index?searchType=icon&q=%E6%98%9F

 

posted @   会吃鱼的猫123  阅读(1801)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae