在各大電商網站中我們購買過商品之后一般都會有一個評價界面，如下圖：

　　用戶沒有評價的時候界面如下：

　　用戶評價之后：如果點了1個星，后面會對應顯示：差

　　 如果點了2個星，后面會對應顯示：一般

　　 如果點了3個星，后面會對應顯示：良好

　　 如果點了4個星，后面會對應顯示：好

　　 如果點了5個星，后面會對應顯示：非常好

　　那么這種評價效果應該怎么寫呢?今天我就帶著大家用js來寫一寫這個效果。

　　先明確目標：

　　默認情況下：先顯示5個灰色的星星：

　　用戶點幾個星就讓幾個星亮起來，也就是用戶點1個星，就讓第一個星星變黃，用戶點第二個星，就讓前面2個星星都變黃，依次類推，用戶點第5個星星，就讓前面5個星星全部變黃。

　　寫布局：

　　我們本案例用到的素材圖如下：

　　從素材圖上我們可以推出要實現評價的效果，默認應該是顯示灰色圖片，用戶點擊之后要顯示黃色圖片。

　　先寫默認效果，在頁面上寫5個灰色的星星，最終要寫出的效果如下：

　　標簽結構如下：用1個li表示1個星星，因為總共需要5個星星，所以創建5個li標簽。

    <!-- ul是放星星的盒子 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- 用來顯示文字的，是差還是一般還是好等 -->
    <div class="text">一般</div>

　　寫樣式，css代碼如下：

　　*{

　　padding: 0;

　　margin: 0;

　　}

　　ul{

　　overflow: hidden;

　　float: left;

　　}

　　li{

　　list-style: none;

　　/* 一個星星的寬高是28*28 */

　　width: 28px;

　　height: 28px;

　　/* 把素材圖當作背景使用，設置不平鋪 */

　　background: url(./img/star.gif) no-repeat;

　　/* 添加浮動，讓5個星星橫向排列 */

　　float: left;

　　}

　　.text{

　　float: left;

　　color: red;

　　font-weight: 700;

　　}

　　寫js代碼

　　標簽結構寫好之后，我們就需要用js來寫邏輯代碼了。

　　我們要完成的效果是：用戶點擊到第幾個星星，就讓第幾個星星包括他之前的星全部變黃。

　　所以我們第一步需要給每個星星都添加一個點擊事件，也就是給li添加點擊事件。

　　// 獲取到所有的li標簽，lis是一個偽數組，里面就得到了所有的li

　　var lis = document.querySelectorAll('ul>li')

　　for(let i = 0;i<lis.length;i++){< p="">

　　lis[i].onclick = function(){

　　// 在這里可以用i表示當前點擊的是第幾個li標簽

　　// 0表示點擊的是第一個

　　// 1表示點擊的是第二個

　　// 2表示點擊的是第三個

　　console.log(i);

　　}

　　}

　　接下來就是：讓i包括i之間的標簽樣式全部變黃。所以重新遍歷lis這個數組。只要 j<=i篩選出來的就是i和i之前的標簽

　　// 獲取到所有的li標簽，lis是一個偽數組，里面就得到了所有的li

　　var lis = document.querySelectorAll('ul>li')

　　for (let i = 0; i < lis.length; i++) {

　　lis[i].onclick = function () {

　　// 在這里可以用i表示當前點擊的是第幾個li標簽

　　// 0表示點擊的是第一個

　　// 1表示點擊的是第二個

　　// 2表示點擊的是第三個

　　// 讓i包括i之間的標簽樣式全部變黃。

　　for (let j = 0; j < lis.length; j++) {

　　if (j <= i) {

　　// 滿足條件就是i和i之前的

　　// 變黃只需調整背景圖的位置即可

　　lis[j].style.backgroundPositionY = "-28px"

　　}

　　else {

　　// 不滿足條件的一律變灰

　　lis[j].style.backgroundPositionY = "0px"

　　}

　　}

　　}

　　}

　　代碼寫到這里就已經實現評價的效果了，但是如果我們能在星星后面顯示差、一般這樣的字樣就更好了。

　　一開始我們在寫布局的時候創造了一個類名叫做tex的標簽，我們就用這個標簽來顯示文字吧。

　　所以在js中獲取到這個標簽。

　　// 獲取用來顯示文字的標簽。

　　var textEle = document.querySelector('.text')

　　// 準備用來顯示的文字

　　var arr = ["差", "一般", "良好", "好", "非常好"]

　　在讓星星變成黃色的if語句中添加一句如下代碼：

　　// i就是第幾個星星，是0就對應數組索引0的文字，i是1就對應數組索引1的文字。

　　textEle.innerText = arr[i]

　　到此我們的評價功能就寫出來啦，各位小伙伴自己嘗試一下吧。

　　奉上最終完整的js代碼，復制就可以使用哦。

　　var lis = document.querySelectorAll('ul>li')

　　var textEle = document.querySelector('.text')

　　var arr = ["差", "一般", "良好", "好", "非常好"]

　　for (let i = 0; i < lis.length; i++) {

　　lis[i].onclick = function () {

　　for (let j = 0; j < lis.length; j++) {

　　if (j <= i) {

　　lis[j].style.backgroundPositionY = "-28px"

　　textEle.innerText = arr[i]

　　}

　　else {

　　lis[j].style.backgroundPositionY = "0px"

　　}

　　}

　　}

　　}

上一篇

QT使用教程之事件

下一篇

JS之元素獲取方法