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

1. 前言

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

html 超级简单实现点赞(收藏)和取消赞效果

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

进阶篇之纯 CSS + 字体实现五角星(半颗星)评分

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

❤

2.1.3 js 代码

$(function(){

$(".like").click(function(){

$(this).toggleClass('cs');

})

})

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

★

3

★

4

★

5

★

6

★

7

2.2.3 js 代码

$(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');

})

})

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

2.3.4 展示效果图

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

3. 本文总结

个人觉得这几种情况做前端的话还是会很大概率遇到的，我也希望这篇文章对你有帮助，能让你学到知识，也通过这个总结，让自己更深的领会到了学习的重要性！如果这篇文章对你有帮助，可以点个赞，感谢支持，如果觉得没有帮助到你或者写的不好，还请指教。

来源: http://www.cnblogs.com/sxs161028/p/7278219.html