JS实现评价的星星功能

更新时间：2017年08月20日 15:45:00 投稿：mrr

这篇文章主要介绍了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-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实现评价的星星功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

如何基于layui的laytpl实现数据绑定的示例代码
这篇文章主要介绍了如何基于layui的laytpl实现数据绑定的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
基于Bootstrap table组件实现多层表头的实例代码
Bootstrap table还有一个很多强大的功能，下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的实例代码，需要的朋友参考下吧
2017-09-09
前端必备插件之纯原生JS的瀑布流插件Macy.js
这篇文章主要介绍了前端必备插件之纯原生JS的瀑布流插件Macy.js，一款非常轻量级的纯原生JS的瀑布流插件，有兴趣的可以了解一下
2017-11-11
Java @Schema和@ApiModel等注解的联系浅析
这篇文章主要给大家介绍了关于Java @Schema和@ApiModel等注解的联系的相关资料,我在看公司之前的文档,发现了@schema注解,不太了解,所以查询了一些资料,把我的见解记录下,需要的朋友可以参考下
2023-08-08
详解JavaScript如何有效取消HTTP请求
在Web开发中,取消HTTP请求是一项关键任务,所以本文为大家介绍了如何使用XMLHttpRequest、Fetch和Axios这三种常用的HTTP请求方式来实现取消请求的功能,需要的可以参考下
2023-09-09
Javascript动画效果（1）
这篇文章主要为大家详细介绍了第一篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
JavaScript时间对象Date内置构造函数操作实例
这篇文章主要为大家介绍了JavaScript时间对象Date内置构造函数操作实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
javascript实现日期按月份加减
JavaScript实现日期加减计算功能代码实例，因为在js中没有类似C#中的AddDays方法，所以要想实现日期加减的话，就需要自己写函数来实现。这里分享给大家，有需要的小伙伴可以参考下
2015-05-05
java遇到微信小程序 "支付验证签名失败" 问题解决
这篇文章主要介绍了java遇到微信小程序 "支付验证签名失败" 问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
微信小程序实现文字无限轮播效果
这篇文章主要为大家详细介绍了微信小程序实现文字无限轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12