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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
jQuery select操作控制方法小结
May 26 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
了解JavaScript中let语句
May 30 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
js数据类型检测总结
2018/08/05 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
js实现查询商品案例
2020/07/22 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
Python中操作mysql的pymysql模块详解
2016/09/13 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
利用nohup来开启python文件的方法
2019/01/14 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
为什么相对PHP黑python的更少
2020/06/21 Python
大学生就业自我鉴定
2013/10/26 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript