版权声明：本文为博主原创文章，遵循 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. 【RMAN】TSPITR--RMAN表空间基于时间点的自动恢复

    [RMAN]TSPITR--RMAN表空间基于时间点的自动恢复 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其 ...

  2. ajax 传递数组参数

    一.ajax 传递数组参数 需要添加: traditional: true, let typeIDArr = [,,,,,]; var that = this; var url = '@Url.Act ...

  3. php的微信公众平台开发接口类

    <?php define("TOKEN", "weixin"); $wechatObj = new wechatCallbackapiTest(); if ...

  4. centos8 网络配置

    目录 centos8已经发布了,下载了一个体验一下,新安装好的centos8默认网卡是没有启动的,安装好后需要先配置网络.在/etc/sysconfig/network-scripts目录下存放着网卡 ...

  5. Android开发之常用Intent.Action【转】

    1.从google搜索内容 Intent intent = new Intent(); intent.setAction(Intent.ACTION_WEB_SEARCH); intent.putEx ...

  6. 【linux-command】Chrome安装linux-command插件

    一.linux-command是什么 550 多个 Linux 命令,内容包含 Linux 命令手册.详解.学习,值得收藏的 Linux 命令速查手册.Githb地址: https://github. ...

  7. Linux实验：hdfs shell基本命令操作（一）

    [实验目的] 1)熟练hdfs shell命令操作 2)理解hdfs shell和linux shell命令 [实验原理] 安装好hadoop环境之后,可以执行hdfs shell命令对hdfs 的空 ...

  8. Netlink: 内核与用户空间传输数据的socket协议

    https://en.wikipedia.org/wiki/Netlink https://stackoverflow.com/questions/12899055/how-kernel-notify ...

  9. Notepad++常用快捷键：

    Ctrl-H 打开Find / Replace 对话框 Ctrl-D 复制当前行 Ctrl-L 删除当前行 Ctrl-T 上下行交换 F3 找下一个 Shift-F3 找上一个 Ctrl-Shift- ...

  10. admin端的教师管理功能测试

    1  概述 1.1   测试范围 本次所测试的内容是admin端的教师管理功能. 1.2   测试方法 采用黑盒子方法进行集成测试. 1.3   测试环境 (1)   服务器l  操作系统:Windo ...