JS实现评价的星星功能


Posted in Javascript onAugust 20, 2017

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

先上图看看吧:

JS实现评价的星星功能

虽然简单,还是有几个注意的地方:

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实现评价的星星功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javaScript同意等待代码实现心得
Jan 01 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
基于js判断浏览器是否支持webGL
Apr 18 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 #Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 #Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 #Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 #Javascript
ES6扩展运算符的用途实例详解
Aug 20 #Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 #Javascript
Vue动态组件实例解析
Aug 20 #Javascript
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
php利用单例模式实现日志处理类库
2014/02/10 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
高一学生评语大全
2014/04/25 职场文书
我的画教学反思
2014/04/28 职场文书
安全演讲稿大全
2014/05/09 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
保护黄河倡议书
2014/05/16 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android