1.前言

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

2.详细讲解

      使用方法：

      注意事项：

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

      字符图集一览表：

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

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

2.1.1 css样式

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

2.1.2 html内容 

❤

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内容

2 &#9733; 3 &#9733; 4 &#9733; 5 &#9733; 6 &#9733; 7

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内容

RRRRR4.7分RRRRR3.5分RRRRR2.4分

2.3.4 展示效果图

2.3.5 总结：是不是很简单就实现了。实际操作中，大家就可以按照这个思路了，以后遇到这种效果都无需用图片再去拼接了。超级简单实用。

3.本文总结