css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）
1. 前言
之前做的好几个项目中，都会遇到打分，评分，点赞这样的需求，写了很多次，每次需要再写的时候，就会翻出之前写过的代码，然后 copy 过来。总觉得这样的话没有进步，没有把知识放进脑袋里，所以，自己花了 2 个小时，把这三种类型的需求自己写了 demo 并做了演示，这样的话，感觉一字一字敲出来的代码，确实是到了脑袋里了。之前一直崇尚写简单的博客，也将五角星评分、点赞收藏、展示评分写成了三个简单的博客，奈何博客园要求博客要有篇幅，所以我的那三篇博客并没有上到博客园首页，但是我觉得这个方法应该让更多的小伙伴知道，所以今天做了一个总结，希望能在博客园首页展示。当然了，如果不想看长篇的，可以自行看简短版本：
2. 详细讲解
使用方法：
使用 unicode 字符集，文档需要申明为 UTF-8;
- 下面符号列表后面有两列编号，第一列是用于 HTML 的，用的时候在前面加上 &#;
- 第二列用于 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">❤</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>★</li> 3 <li>★</li> 4 <li>★</li> 5 <li>★</li> 6 <li>★</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');})$(</span>"ul li").click(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () { $(</span><span style="color: rgba(0, 0, 255, 1)">this</span>).addClass('cs'<span style="color: rgba(0, 0, 0, 1)">); $(</span><span style="color: rgba(0, 0, 255, 1)">this</span>).prevAll().addClass('cs'<span style="color: rgba(0, 0, 0, 1)">); $(</span><span style="color: rgba(0, 0, 255, 1)">this</span>).nextAll().removeClass('cs'<span style="color: rgba(0, 0, 0, 1)">); }) })</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;}<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">字体路径按照你的路径去修改</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(128, 0, 0, 1)"> @font-face </span>{<span style="color: rgba(255, 0, 0, 1)"> font-family</span>:<span style="color: rgba(0, 0, 255, 1)"> 'AlluraRegular'</span>;<span style="color: rgba(255, 0, 0, 1)"> src</span>:<span style="color: rgba(0, 0, 255, 1)"> 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')</span>; }<span style="color: rgba(128, 0, 0, 1)"> .starFive span </span>{<span style="color: rgba(255, 0, 0, 1)">display</span>:<span style="color: rgba(0, 0, 255, 1)"> block</span>;<span style="color: rgba(255, 0, 0, 1)">float</span>:<span style="color: rgba(0, 0, 255, 1)"> left</span>;<span style="color: rgba(255, 0, 0, 1)">font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 25px</span>;<span style="color: rgba(255, 0, 0, 1)"> font-family</span>:<span style="color: rgba(0, 0, 255, 1)"> 'AlluraRegular'</span>;<span style="color: rgba(255, 0, 0, 1)"> text-align</span>:<span style="color: rgba(0, 0, 255, 1)"> center</span>;<span style="color: rgba(255, 0, 0, 1)">color</span>:<span style="color: rgba(0, 0, 255, 1)"> #888</span>;<span style="color: rgba(255, 0, 0, 1)">width</span>:<span style="color: rgba(0, 0, 255, 1)"> 27px</span>;<span style="color: rgba(255, 0, 0, 1)">height</span>:<span style="color: rgba(0, 0, 255, 1)"> 33px</span>;<span style="color: rgba(255, 0, 0, 1)">line-height</span>:<span style="color: rgba(0, 0, 255, 1)"> 33px</span>;<span style="color: rgba(255, 0, 0, 1)"> margin-right</span>:<span style="color: rgba(0, 0, 255, 1)"> 5px</span>;<span style="color: rgba(255, 0, 0, 1)">position</span>:<span style="color: rgba(0, 0, 255, 1)"> relative</span>;<span style="color: rgba(255, 0, 0, 1)">overflow</span>:<span style="color: rgba(0, 0, 255, 1)"> hidden</span>;<span style="color: rgba(255, 0, 0, 1)">white-space</span>:<span style="color: rgba(0, 0, 255, 1)"> pre</span>; }<span style="color: rgba(128, 0, 0, 1)"> .starFive span:before </span>{<span style="color: rgba(255, 0, 0, 1)">position</span>:<span style="color: rgba(0, 0, 255, 1)"> absolute</span>;<span style="color: rgba(255, 0, 0, 1)"> left</span>:<span style="color: rgba(0, 0, 255, 1)"> 0</span>;<span style="color: rgba(255, 0, 0, 1)">top</span>:<span style="color: rgba(0, 0, 255, 1)"> 0</span>;<span style="color: rgba(255, 0, 0, 1)">display</span>:<span style="color: rgba(0, 0, 255, 1)"> block</span>;<span style="color: rgba(255, 0, 0, 1)">width</span>:<span style="color: rgba(0, 0, 255, 1)"> 50%</span>;<span style="color: rgba(255, 0, 0, 1)"> content</span>:<span style="color: rgba(0, 0, 255, 1)"> attr(data-content)</span>;<span style="color: rgba(255, 0, 0, 1)">overflow</span>:<span style="color: rgba(0, 0, 255, 1)"> hidden</span>;<span style="color: rgba(255, 0, 0, 1)">color</span>:<span style="color: rgba(0, 0, 255, 1)"> #F63</span>; }<span style="color: rgba(128, 0, 0, 1)"> .sF1 span:before</span>{<span style="color: rgba(255, 0, 0, 1)">width</span>:<span style="color: rgba(0, 0, 255, 1)"> 70%</span>;}<span style="color: rgba(128, 0, 0, 1)"> .sF2 span:before</span>{<span style="color: rgba(255, 0, 0, 1)">width</span>:<span style="color: rgba(0, 0, 255, 1)"> 50%</span>;}<span style="color: rgba(128, 0, 0, 1)"> .sF3 span:before</span>{<span style="color: rgba(255, 0, 0, 1)">width</span>:<span style="color: rgba(0, 0, 255, 1)"> 40%</span>;}<span style="color: rgba(128, 0, 0, 1)"> .starFive .org_star </span>{<span style="color: rgba(255, 0, 0, 1)">color</span>:<span style="color: rgba(0, 0, 255, 1)"> #F63</span>;}<span style="color: rgba(128, 0, 0, 1)"> .starFive b </span>{<span style="color: rgba(255, 0, 0, 1)">font-weight</span>:<span style="color: rgba(0, 0, 255, 1)"> normal</span>;<span style="color: rgba(255, 0, 0, 1)"> line-height</span>:<span style="color: rgba(0, 0, 255, 1)"> 40px</span>;<span style="color: rgba(255, 0, 0, 1)"> font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 25px</span>;<span style="color: rgba(255, 0, 0, 1)">color</span>:<span style="color: rgba(0, 0, 255, 1)"> #888</span>;<span style="color: rgba(255, 0, 0, 1)">margin-left</span>:<span style="color: rgba(0, 0, 255, 1)"> 10px</span>; }</pre>
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. 本文总结
个人觉得这几种情况做前端的话还是会很大概率遇到的，我也希望这篇文章对你有帮助，能让你学到知识，也通过这个总结，让自己更深的领会到了学习的重要性！如果这篇文章对你有帮助，可以点个赞，感谢支持，如果觉得没有帮助到你或者写的不好，还请指教。