CSS 例項系列 - 03 - Rate 愛心評分

Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裡是 jsliang~

今兒要實現的是：Rate 評分

本期將和小夥伴們探討：

√ 透過 CSS，配合簡單的 HTML + JS 完成評分元件

本例項的程式碼地址：

一前言

本 CSS 系列文章：

主推學以致用。結合面試題和工作例項，讓小夥伴們深入體驗 61 個工作常見的 CSS 屬性和各種 CSS 知識。
主推純 CSS。儘可能使用 HTML + CSS 完成學習目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知識，適合新人學習 + 大佬複習。

如果文章在一些細節上沒寫清楚或者誤導讀者，歡迎評論/吐槽/批判，你的點贊、收藏和關注是我更新的動力 ❤

更多知識分享文章可見：jsliang 的文件庫

二本期知識點

2.1 ::before 和 ::after

關於偽元素 ::before 和 ::after 以及 content，我們要簡單化理解：

那就是 Web 版的 jsliang，為了錢（content）瞻前（::before）顧後（::after）。

其實就是 content 一般配合 ::before 和 ::after，來實現內容的填充，content: '' 配合 width/height 可以完成矩形的繪製（就跟正常 div 一樣了）

2.2 選擇器 ~

關於選擇器 ~，也很容易理解：

門前大橋下，有著 5 只鴨，數到 2 時用上 ~，那就匹配 3、4、5。

三實現步驟

OK，小知識點講完，下面我們開始寫這個例項吧~

第一步，HTML 結構非常簡單：

<!-- 外層容器 - 主要是為了好看 -->
<div class="container">
  <!-- 內層容器 - 關鍵評分 -->
  <div class="rate-container">
    <input type="radio" class="rate" name="rate" value="5">
    <input type="radio" class="rate" name="rate" value="4">
    <input type="radio" class="rate" name="rate" value="3">
    <input type="radio" class="rate" name="rate" value="2">
    <input type="radio" class="rate" name="rate" value="1">
  </div>
  <!-- 評分提示 -->
  <p class="scoring">小夥伴，快評分呀~</p>
</div>

它的顯示效果如下：

第二步，我們施加 CSS 魔法：

/* 關鍵樣式 - Flex 佈局 */
.rate-container {
  /* 這裡 Flex 是關鍵 */
  /* 如果用正常順序的話，使用兄弟元素選擇器 ~ */
  /* 會導致 ❤ 的選擇反過來 */
  /* 所以需要 flex-direction 再翻轉一遍 */
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
/* 去掉預設樣式 */
.rate {
  position: relative;
  -webkit-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

這裡我們可以看到，我們原本按照 5 -> 1 排序的 input:radio 元件，透過 display:flex 屬性調轉過來了。

然後我們在 .rate 上移除了預設樣式，所以現在看不到邊框了。

下面我們繪製愛心，並讓它有 hover 上去點亮的效果：

/* 描繪愛心元件 */
.rate::after {
  position: absolute;
  content: '❤';
  font-size: 24px;
}
/* 元素 hover 效果 */
.rate:hover,
/* 元素 hover 後，兄弟元素跟著變 */
/* 這裡用 ~ 可以直接讓後面所有元素跟著變 */
/* 如果用 + 只會讓後面一個元素跟著變 */
.rate:hover ~ .rate,
/* 元素選中後，變化同上 */
.rate:checked,
.rate:checked ~ .rate {
  color: deeppink;
}

此時我們可以看到：

是不是簡簡單單~

此時看不懂 ~ .rate 的意思，可以回顧下開局的 CSS 屬性講解

第三步，我們完成 JavaScript 程式碼編寫，讓它的互動更加有意思：

window.onload = () => {
  const scoring = document.querySelector('.scoring');
  const checkboxList = document.querySelectorAll('.rate');
  // 上一次打的分數
  let prevScore = 0;
  checkboxList.forEach((item) => {

    // 改變評分的時候，設定文字效果
    item.onchange = (e) => {
      const score = Number(e.target.value);
      switch (score) {
        case 1: scoring.innerText = '-_- 謝謝你這麼不看好我 -_-'; break;
        case 2: scoring.innerText = '哇塞，我比更低更勝一籌！'; break;
        case 3: scoring.innerText = '中規中矩啦，麻麻嘚~'; break;
        case 4: scoring.innerText = '哇塞，我比更高差了一步！'; break;
        case 5: scoring.innerText = '^_^ 謝謝你這麼看好我 ^_^'; break;
        default: scoring.innerText = '小夥伴，快評分呀~'; break;
      }
    };

    // 點選的時候，判斷是選中還是反選
    item.onclick = (e) => {
      const score = Number(e.target.value);
      // 評分相同，則反選，且清空評分
      if (score === prevScore) {
        item.checked = false;
        prevScore = 0;
        scoring.innerText = '小夥伴，快評分呀~'
      } else {
        // 否則設定上一次評分
        prevScore = score;
      }
    };
  });
};

這樣，我們就完成了評分效果：

四參考文獻

不折騰的前端，和鹹魚有什麼區別！

覺得文章不錯的小夥伴歡迎點贊/點 Star。

如果小夥伴需要聯絡 jsliang：

個人聯絡方式存放在 Github 首頁，歡迎一起折騰~

爭取打造自己成為一個充滿探索欲，喜歡折騰，樂於擴充套件自己知識面的終身學習斜槓程式設計師。

jsliang 的文件庫由梁峻榮採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。<br/>基於 https://github.com/LiangJunrong/document-library 上的作品創作。<br/>本許可協議授權之外的使用許可權可以從 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 處獲得。

CSS 例項系列 - 03 - Rate 愛心評分

一 前言

二 本期知識點

2.1 ::before 和 ::after

2.2 選擇器 ~

三 實現步驟

四 參考文獻

相關文章

一前言

二本期知識點

三實現步驟

四參考文獻