五一假期小作业
JS版星级评分
如图所示，在曾经曾用CSS3的方案实现过。现在用JavaScript重新实现。
演示地址：https://gethtml.cn/project/2020/05/01/index.html
遇到的问题
- JavaScript不能直接操纵伪类元素，因此只能用控制类的方式
- 没有搞明白三种状况
- 第一次点击
- 第二次点击是加星还是减星
- 判断循环判断循环（代码太烂）
- 部分过渡动画存在一定缺陷
- 嵌套过于多（代码太烂）
解决方案
- 由于五个五角星的实现依靠五个一模一样的
<i>标签，因此使用事件委托方式 - 定义一个列表，用于存储当前页面中的所有星（
<i>标签） - 定义一个变量，用作用户是否第一次操作的标志。（即判断是否是第一次操作）
- 如果是第一次操作，那么直接循环添加类名即可
- 不是第一次操作，需要判断是否添加过类名
- 在用户第一次操作后，需要判断是加星还是减星
即判断当前点击的元素是否含有星
- 如有有星星，取消右边和当前点击的星
- 如果没有星，将左边所有未点亮的星和当前点击的星点亮
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星星评级动态效果</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>
<style>
body {
background: #222;
}
.rating {
font-family: "Ionicons";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rating i {
position: relative;
margin-right: 6px;
font-size: 5em;
color: gold;
cursor: pointer;
}
.rating i:hover::before {
content: "\f384";
opacity: 1;
transition: 0.5s;
transform: scale(1.2);
}
.active::before {
content: "\f384";
opacity: 1;
transition: 0.5s;
}
</style>
</head>
<body>
<div class="rating">
<i class="icon ion-md-star-outline"></i>
<i class="icon ion-md-star-outline"></i>
<i class="icon ion-md-star-outline"></i>
<i class="icon ion-md-star-outline"></i>
<i class="icon ion-md-star-outline"></i>
</div>
<script>
var rating = document.getElementsByClassName('rating')[0]
var icon = document.getElementsByClassName('icon')
var iconList = []
for (var i = 0; i < icon.length; i++) {
iconList.push(icon[i])
}
// 没有点过
var flag = true
document.addEventListener('click', function (event) {
var target = event.target
if (target.nodeName === 'I') {
var num = iconList.indexOf(target)
if (flag) {
for (var j = 0; j <= num; j++) {
icon[j].className += " active"
}
flag = false
} else {
// 判断加还是取消
if (icon[num].className.indexOf(' active') === -1) {
// 没有找到,则添加
for (var m = num; m >= 0; m--) {
if (icon[m].className.indexOf(' active') === -1) {
icon[m].className += " active"
}
}
} else {
// 否则,进行删星星
for (var i = num; i <= icon.length; i++) {
icon[i].className = icon[i].className.replace(' active', '')
}
}
}
}
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-05-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录