共计 2954 个字符,预计需要花费 8 分钟才能阅读完成。
Hello 小伙伴们早上、中午、下午、早晨和深夜好,这里是 jsliang~
今儿要实现的是:Rate 评分
本期将和小伙伴们探讨:
- √ 通过 CSS,配合简略的 HTML + JS 实现评分组件
本实例的代码地址:
- Github – all for one
- 码上掘金 – 03 – Rate 爱心评分
一 前言
本 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;
}
};
});
};
这样,咱们就实现了评分成果:
四 参考文献
- 掘金 – 聪慧的汤姆 – 讲道理,仅 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/ 处取得。