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

標籤：png   遊覽器   pos   str   strong   知識   引用   pad   svg   

1.前言

之前做的好幾個項目中，都會遇到打分，評分，點贊這樣的需求，寫了很多次，每次需要再寫的時候，就會翻出之前寫過的代碼，然後copy過來。總覺得這樣的話沒有進步，沒有把知識放進腦袋裡，所以，自己花了2個小時，把這三種類型的需求自己寫了demo並做了示範，這樣的話，感覺一字一字敲出來的代碼，確實是到了腦袋裡了。之前一直崇尚寫簡單的部落格，也將五角星評分、點贊收藏、展示評分寫成了三個簡單的部落格，奈何部落格園要求部落格要有篇幅，所以我的那三篇部落格並沒有上到部落格園首頁，但是我覺得這個方法應該讓更多的小夥伴知道，所以今天做了一個總結，希望能在部落格園首頁展示。當然了，如果不想看長篇的，可以自行看簡短版本：

1. html超級簡單實現點贊（收藏）和取消贊效果
2. 簡單實現大方接地氣的五角星評分
3. 進階篇之純css+字型實現五角星（半顆星）評分

2.詳細講解

      使用方法：

1. 使用unicode字元集，文檔需要申明為UTF-8;
2. 下面符號列表後面有兩列編號，第一列是用於HTML的，用的時候在前面加上&#;
3. 第二列用於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.本文總結

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

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