版权声明：本文为博主原创文章，遵循 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. synchronized的使用方法和作用域

    文章地址:https://mp.weixin.qq.com/s?__biz=MzI4NTEzMjc5Mw==&mid=2650554746&idx=1&sn=8e45e741c ...

  2. 在本地调用hadoop的api

    第一次在本地运行Java代码,调用hadoop的hdfs的api接口,遇到下面的问题: 1.HADOOP_HOME and hadoop.home.dir are unset 解决办法:在本地安装配置 ...

  3. Java并发包--ConcurrentSkipListSet

    https://www.cnblogs.com/kexianting/p/8550459.html import java.util.concurrent.ConcurrentLinkedQueue; ...

  4. jdbc.DataSourceProperties$DataSourceBeanCreationException: Failed to determine a suitable driver class

    java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.conte ...

  5. Python通过xpath查找元素通过selenium读取元素信息

    #coding:utf-8 from selenium import webdriver import time url ='http://www.baidu.com' driver = webdri ...

  6. python写入excel（方式1）

    import xlsxwriter li=["张三","李四","王五","周六","王琪",&qu ...

  7. SpringBoot整合JDBC模板

    目录 Grade实体类 public class Grade { private Integer gradeId; private String gradeName; public Grade(){ ...

  8. Git的基本使用方法(受益匪浅)

    git指令介绍,下面有详解指令可以先跳过直接看下面的详解 $ mkdir learngit     //创建一个learngit文件夹 $ cd learngit         //进入learng ...

  9. java解决大文件断点续传

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  10. WinDbg常用命令系列---.cordll (控制CLR调试)

    .cordll (控制CLR调试) 简介 .cordell命令控制托管代码调试和Microsoft.NET公共语言运行库(CLR). 使用形式 .cordll [Options] 参数 Options ...