css簡單實現五角星評分、點贊收藏、展示評分（半顆星、1/3顆星）

本文原創作者為：by 蘇小蘇   https://www.cnblogs.com/sxs161028/，關於本文任何觀點，權力，歸原作者所有

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.本文總結

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