css简单实现五角星评分、点赞收藏、展现评分（半颗星、1/3颗星）

1.前言

以前作的好几个项目中，都会遇到打分，评分，点赞这样的需求，写了不少次，每次须要再写的时候，就会翻出以前写过的代码，而后copy过来。总以为这样的话没有进步，没有把知识放进脑壳里，因此，本身花了2个小时，把这三种类型的需求本身写了demo并作了演示，这样的话，感受一字一字敲出来的代码，确实是到了脑壳里了。以前一直崇尚写简单的博客，也将五角星评分、点赞收藏、展现评分写成了三个简单的博客，奈何博客园要求博客要有篇幅，因此个人那三篇博客并无上到博客园首页，可是我以为这个方法应该让更多的小伙伴知道，因此今天作了一个总结，但愿能在博客园首页展现。固然了，若是不想看长篇的，能够自行看简短版本：

1. html超级简单实现点赞（收藏）和取消赞效果

2. 简单实现大方接地气的五角星评分

3. 进阶篇之纯css+字体实现五角星（半颗星）评分

2.详细讲解

使用方法：

使用unicode字符集，文档须要申明为UTF-8;

1. 下面符号列表后面有两列编号，第一列是用于HTML的，用的时候在前面加上&#;
2. 第二列用于css文件中，须要用\来转义;也能够用于js中，和css用法同样，但要用\u来转义;

注意事项：

 98%的字符都能在游览器下正常显示，实际操做中，要在各个浏览器下验证一下。每一个浏览器显示的效果也有可能稍微有点区别。

 字符图集一览表：

今天讲到的这几种效果都会用到这个字符集，无需引用：

2.1如何用html简单实现点赞收藏并取消收藏

2.1.1 css样式

.like{ font-size:66px;  color:#ccc; cursor:pointer;} /*原始样式*/
.cs{color:#f00;}/*点击后出现样式*/

2.1.2 html内容 

<p class="like">&#10084;</p>

2.1.3 js代码

<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {            
            $(".like").click(function () {
                $(this).toggleClass('cs');                
            })
        })
    </script>

2.1.4 展现效果

2.1.5 总结：css样式只有两行，第一行就是设置心形大小和颜色，第二行就是点击后心形的颜色。html一行代码就能够展现一个心形。js就是用来点击以后心形变由原始样式变成红色。是否是超简单实用。

2.2 简单大气实现五角星评分

2.2.1 css样式

.cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}/*清浮动*/
 ul li{list-style:none; float:left; font-size:30px; margin:5px; color:#ccc; cursor:pointer;}/*五角星样式*/
.hs,.cs{color:#f00;}/*五角星点击后样式*/

2.2.2 html内容

<ul class="cleanfloat">
2       <li>&#9733;</li>
3        <li>&#9733;</li>
4        <li>&#9733;</li>
5        <li>&#9733;</li>
6        <li>&#9733;</li>
7    </ul>

2.2.3 js代码

<script>
    $(function () {
        $("ul li").hover(function(){
            $(this).addClass('hs');
            $(this).prevAll().addClass('hs');
        },function(){
            $(this).removeClass('hs');
            $(this).prevAll().removeClass('hs');
        })

        $("ul li").click(function () {
            $(this).addClass('cs');
            $(this).prevAll().addClass('cs');
            $(this).nextAll().removeClass('cs');
        })
    })
</script>

2.2.4 展现效果

2.2.5 总结：若是你的项目中要作一个这样的打分效果，就不须要用图片而后计算距离这么麻烦了。这个直接拿去用，颜色样式，大小，都是能够随便控制的，很是的简单和实用。是否是呢。

2.3 css+字体实现五角星（半颗星、1/3颗星）评分效果

2.3.1 这个用到了 webFontIcon 字体，很抱歉我不会上传字体，会的童鞋能够教教我，你们能够本身去下载这个字体。

2.3.2 css样式

       .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}
        *{margin:0; padding:0;}

        /*字体路径按照你的路径去修改*/
         @font-face {
            font-family: 'AlluraRegular';
            src: url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.eot'),
                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont?#iefix') format('embedded-opentype'), 
                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.woff') format('woff'),
                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.ttf') format('truetype'),
                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.svg#AlluraRegular') format('svg');
        }
        .starFive span {display: block;float: left;font-size: 25px; font-family: 'AlluraRegular';
            text-align: center;color: #888;width: 27px;height: 33px;line-height: 33px;
            margin-right: 5px;position: relative;overflow: hidden;white-space: pre;
         }
        .starFive span:before {position: absolute;
            left: 0;top: 0;display: block;width: 50%;
            content: attr(data-content);overflow: hidden;color: #F63;
        }
        .sF1 span:before{width: 70%;}
        .sF2 span:before{width: 50%;}
        .sF3 span:before{width: 40%;}
        .starFive .org_star {color: #F63;}
        .starFive b {font-weight: normal; line-height: 40px;
            font-size: 25px;color: #888;margin-left: 10px;
        }

2.3.3 html内容

<div>
      <p class='cleanfloat starFive sF1'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><b>4.7分</b></p>
      <p class='cleanfloat starFive sF2'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><b>3.5分</b></p>
      <p class='cleanfloat starFive sF3'><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><span>R</span><b>2.4分</b></p>
 </div>

2.3.4 展现效果图

2.3.5 总结：是否是很简单就实现了。实际操做中，你们就能够按照这个思路了，之后遇到这种效果都无需用图片再去拼接了。超级简单实用。

3.本文总结

我的以为这几种状况作前端的话仍是会很大几率遇到的，我也但愿这篇文章对你有帮助，能让你学到知识，也经过这个总结，让本身更深的领会到了学习的重要性！若是这篇文章对你有帮助，能够点个赞，感谢支持，若是以为没有帮助到你或者写的很差，还请指教。