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 相关文章推荐
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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
PHP+ajax 无刷新删除数据
2010/02/20 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Python加速程序运行的方法
2020/07/29 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
广告学专业应届生求职信
2013/10/01 职场文书
《影子》教学反思
2014/02/21 职场文书
工作评语大全
2014/04/26 职场文书
学习张林森心得体会
2014/09/10 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
爱心捐款活动总结
2015/05/09 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
Python加密与解密模块hashlib与hmac
2022/06/05 Python