主页 / 网络编程 /

JS实现评价的星星功能

网络编程 2021-07-04 18:33www.168986.cn编程入门
这篇文章主要介绍了JS实现评价的星星功能,需要的朋友可以参考下

刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ 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-: 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/mon/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数组操作之增删改查的简单实现 下一篇：Cropper.js 实现裁剪图片并上传(PC端)

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by