版权声明：本文为博主原创文章，遵循 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. IDEA整合SVN遇到的坑

    1.安装SVN客户端   注意客户端版本与汉化插件的版本匹配问题,否则汉化无效 2.安装客户端时第二项默认不安装记得要手动选择为安装,否则不会生成svn.exe,这个文件会在IDEA中配置 3.安装客 ...

  2. Codeforces Round #574 (Div. 2)题解

    比赛链接 传送门 A题 题意 \(n\)个人每个人都有自己喜欢喝的\(vechorka\)口味,现在给你\(\lceil n/2\rceil\)箱\(vechorka\),每箱有两瓶,问最多能有多少个 ...

  3. java服务端的效率

    java服务端的效率 可以的 socketclient  thread 线程池 发送消息  80个socket client并发

  4. KVM网络

    默认KVM安装后,生成virbro和virbro-nic,VM通过NAT方式连接 新增桥接网络 1.首先创建网桥并绑定 brctl addbr br0 #增加网桥 brctl addif bro en ...

  5. test20190926 孙耀峰

    70+100+0=170.结论题自己还是要多试几组小数据.这套题还不错. ZYB建围墙 ZYB之国是特殊的六边形构造. 已知王国一共有

  6. Centos 7 命令行版虚拟机安装

    使用VMware创建虚拟机 点击下一步 点击下一步 下一步 选择你要安装的虚拟机是哪种操作系统 选择虚拟机的安装位置 选择处理器 自定义内存 选择网络 下一步 下一步 下一步就可以 自定义磁盘容量 然 ...

  7. Spark-源码分析01-Luanch Driver

    1.SparkSubmit.scala 什么是Driver 呢?其实application运行的进程 就是driver,也是我们所写的代码就是Driver. object DefaultPartiti ...

  8. WinDbg扩展

    WinDbg的扩展,也可以叫插件.它用于实现针对特定调试目标的调试功能,用于扩展某一方面的调试功能.扩展的实现是通过扩展模块(DLL)实现的.Windbg本身已经包含了很多扩展命令,这些扩展为这Win ...

  9. vue-router 的两种模式的区别

    Vue Router 是Vue官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.vue-router 默认 hash 模式,还有一种是history模式. hash模 ...

  10. 洛谷 题解 UVA572 【油田 Oil Deposits】

    这是我在洛谷上的第一篇题解!!!!!!!! 这个其实很简单的 我是一只卡在了结束条件这里所以一直听取WA声一片,详细解释代码里见 #include<iostream> #include&l ...