JS实现评价的星星功能

2019-11-19 15:43:57

字体：大中小

来源：转载

供稿：网友

刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ css样式都写了好大一串，还沾沾自喜终于画出来了，然后瞅一瞅旁边的妹子写得怎么样了，哇！人家机智的！直接用符号★就解决了！！！唉，智商捉急呀！

先上图看看吧：

虽然简单，还是有几个注意的地方：

1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。

2. 点击后关闭hover效果。

3. 点击同一颗星星，星星可以随时换色。

具体代码展示：

<!doctype html><html>  <head>    <meta charset="UTF-8">    <title></title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  </head>  <style type="text/css">    .stars{      white-space: nowrap;      text-align: center;      margin-top: 20px;      margin-bottom: 20px;    }    .stars li{      display: inline-block;      color: #ADADAD;      font-size: 40px;    }  </style>  <body>    <ul class="stars">      <li>★</li>      <li>★</li>      <li>★</li>      <li>★</li>      <li>★</li>    </ul>    <script src="../../js/common/jquery-git.js"></script>    <script>    $(function() {        //为星星设置hover效果        var isClicked = false;        var beforeClickedIndex = -1;        var clickNum = 0; //点击同一颗星次数        $('li').hover(          function() {            if(!isClicked) {              $(this).css('color', '#F0AD4E');              var index = $(this).index();              for(var i = 0; i <= index; i++) {                $('li:nth-child(' + i + ')').css('color', '#F0AD4E');              }            }          },          function() {            if(!isClicked) {              $('li').css('color', '#ADADAD');            }          }        );        //星星点击事件        $('li').click(function() {          $('li').css('color', '#ADADAD');          isClicked = true;          var index = $(this).index();          for(var i = 1; i <= index+1; i++) {            $('li:nth-child(' + i + ')').css('color', '#F0AD4E');          }          if(index == beforeClickedIndex) { //两次点击同一颗星星 该星星颜色变化            clickNum++;            if(clickNum % 2 == 1) {              $('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD');            } else {              $('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E');            }          } else {            clickNum = 0;            beforeClickedIndex = index;          }        });      });    </script>  </body></html>

总结

以上所述是小编给大家介绍的JS实现评价的星星功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

上一篇：JS数组操作之增删改查的简单实现

下一篇：详解A标签中href=""的几种用法