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

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

我的以爲這幾種狀況作前端的話仍是會很大機率遇到的，我也但願這篇文章對你有幫助，能讓你學到知識，也經過這個總結，讓本身更深的領會到了學習的重要性！若是這篇文章對你有幫助，能夠點個贊，感謝支持，若是以爲沒有幫助到你或者寫的很差，還請指教。