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');
})
$("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.本文總結
個人覺得這幾種情況做前端的話還是會很大概率遇到的，我也希望這篇文章對你有幫助，能讓你學到知識，也通過這個總結，讓自己更深的領會到了學習的重要性！如果這篇文章對你有幫助，可以點個贊，感謝支持，如果覺得沒有幫助到你或者寫的不好，還請指教。