Hello 小伙伴们早上、中午、下午、早晨和深夜好，这里是 jsliang~

今儿要实现的是：Rate 评分

本期将和小伙伴们探讨：

  • √ 通过 CSS，配合简略的 HTML + JS 实现评分组件

本实例的代码地址：

  • Github - all for one
  • 码上掘金 - 03 - Rate 爱心评分

一 前言

本 CSS 系列文章：

  1. 主推学以致用。联合面试题和工作实例，让小伙伴们深刻体验 61 个工作常见的 CSS 属性和各种 CSS 常识。
  2. 主推纯 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;      }    };  });};

这样，咱们就实现了评分成果：

四 参考文献

  • 掘金 - 聪慧的汤姆 - 讲道理，仅3行外围css代码的rate评分组件，我被本人秀到头皮发麻♂️
  • GitHub - jawil/blog - 纯CSS实现网站罕用的五角星评分和分数展现交互成果
  • codepen - 纯CSS 评分

不折腾的前端，和咸鱼有什么区别！

感觉文章不错的小伙伴欢送点赞/点 Star。

如果小伙伴须要分割 jsliang：

  • Github
  • 掘金

集体联系方式寄存在 Github 首页，欢送一起折腾~

争取打造本人成为一个充斥摸索欲，喜爱折腾，乐于扩大本人知识面的一生学习斜杠程序员。

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名-非商业性应用-雷同形式共享 4.0 国内 许可协定 进行许可。<br/>基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/>本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。