版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouqi_qiou/article/details/77428804

刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ 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写评价的星星的更多相关文章

  1. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  2. 用JS写了一个打字游戏，反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

  3. JS写小游戏（一）：游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  4. 去它的h5，我还是用js写原生跨平台app吧

    智能手机功能越来越强大,已经在逐渐替代电脑的作用.百度.腾讯.阿里的移动端日活数也在逐步的赶上甚至超越电脑端用户.叫喊着“mobile first”的公司越来越多,App开发者应运而生,且队伍日趋庞大 ...

  5. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  6. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  7. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  8. .NET获取不到js写的cookie解决方法

    今晚使用javascript设置一个来路的cookie,之后使用ASP.NET获取这个cookie值,发现ASP.NET获取不到JS设置的cookie值,真郁闷中,以下是JS写Cookie的代码: C ...

  9. js写的复制功能，只支持IE

    如果用js写,只能支持IE,如果想全支持,需要用jQuery的插件:jquery.zclip.js 下面是用js写的: var copyHref = function(){               ...

随机推荐

  1. 【异常（待解决）】org.apache.http.NoHttpResponseException: api.weixin.qq.com:443 failed to respond

    一.记录下异常堆栈信息 -- ::-exec-] ERROR weixin.popular.client.LocalHttpClient - execute error org.apache.http ...

  2. centos 宝塔 使用命令行快速导入数据库sql

    先将sql文件上传到服务器,例如上传到www文件夹 然后打开命令行工具 输入 mysql -u 数据库用户名 -p 然后复制密码进去 然后输入 use 数据库名 回车 然后输入 source /www ...

  3. Python入门篇-面向对象概述

    Python入门篇-面向对象概述 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.语言的分类 面向机器 抽象成机器指令,机器容易理解 代表:汇编语言 面向过程 做一件事情,排出个 ...

  4. redis发布订阅实现各类定时业务（优惠券过期，商品不支付自动撤单，自动收货等）

    修改redis配置文件找到机器上redis配置文件conf/redis.conf,新增一行  notify-keyspace-events Ex 最后的Ex代表 监听失效的键值 修改后效果如下图 代码 ...

  5. Linux查看文件指定行数内容

    1.tail date.log               输出文件末尾的内容,默认10行 tail -20  date.log        输出最后20行的内容 tail -n -20  date ...

  6. 微信小程序和APP优劣势大对比

    小程序的优势: 1. 无需下载,随走随关 2. 功能丰富,体验更简便 3. 接口众多,可以进行不断的开发 4. 流量入口大,背靠日活9.6亿的微信 5. 有强大的微信生态环境 小程序对比APP的好处: ...

  7. fastjson将json格式字符串转成list集合

    1.gameListStr = "[{"gameId":"1","gameName":"哈哈"},{" ...

  8. MyBatis框架之注解开发

    MyBatis注解开发 @Insert注解注解属性value:写入SQL语句 @Options注解实现添加新数据的主键封装注解属性useGeneratedKeys:使用生成的主键,配置为truekey ...

  9. 20199301《Linux内核原理与分析》第十一周作业

    Linux Capability探索实验 一.实验描述 本实验中,将感受到linux capability功能在访问控制上的优势,掌握使用Capability达到遵守最小权限原则的目的,并分析linu ...

  10. vue cli 框架搭建

    =============== 通知: 博主已迁至<掘金>码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a8 ...