版权声明：本文为博主原创文章，遵循 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. kubernetes资源预留---转发

    下面内容还处于测试阶段,生产上是否能保证集群稳定暂时还不清楚.

  2. BS开发扫盲篇-前端技术风云录

    BS开发扫盲篇-前端技术风云录 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.     一.HTML诞生 HTML(HyperText Markup Language)超文本标记语言 ...

  3. 读react源码准备

    git源码地址:https://github.com/facebook/react react 里面就是 react源码 react里面的react文件夹就是react源码,react源码非常的少,总 ...

  4. 《BUG创造队》第九次团队作业：Beta冲刺与验收准备

    项目 内容 这个作业属于哪个课程 2016级软件工程 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目验收 团队名称 BUG创造队 作业学习目标 (1)掌握软件黑盒测试技术:(2)学 ...

  5. CF938G Shortest Path Queries 和 CF576E Painting Edges

    这两道都用到了线段树分治和按秩合并可撤销并查集. Shortest Path Queries 给出一个连通带权无向图,边有边权,要求支持 q 个操作: x y d 在原图中加入一条 x 到 y 权值为 ...

  6. docker postgresql 数据库

    1. 使用docker 镜像 获取镜像:docker pull postgres:9.4 启动: docker run --name postgres1 -e POSTGRES_PASSWORD=pa ...

  7. Object.create 以原对象为原型创建一个新对象

    Object.create = function(o){ var Fun = function(){}; Fun.prototype = o; return new Fun(); } var peo ...

  8. Codechef：Fibonacci Number/FN——求通项+二次剩余+bsgs

    题意 定义 $F_n$ 为 $$F_n = \left\{\begin{matrix}0, n=0\\ 1, n=1 \\F_{n-1} + F_{n-2}, n > 1\end{matrix} ...

  9. LeetCode 449. Serialize and Deserialize BST

    原题链接在这里:https://leetcode.com/problems/serialize-and-deserialize-bst/description/ 题目: Serialization i ...

  10. 洛谷 P1379 八数码难题 题解

    我个人感觉就是一道bfs的变形,还是对bfs掌握不好的人有一定难度. 本题思路: 大体上用bfs搜,用map来去重,在这里只需要一个队列,因为需要较少步数达到的状态一定在步数较多的状态之前入队列. # ...