效果： 实现点击星星显示评价的满意程度
- 点击之前：
- 点击：
灰色星星：
亮起星星：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<body>
<div class="stars-wrapper">
<!-- //评分项1 -->
<div class="stars">
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<div class="lev"></div>
</div>
<!-- //评分项2 -->
<div class="stars">
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<div class="lev"></div>
</div>
<!-- //评分项3 -->
<div class="stars">
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<img src="./images/gray.png" alt="" />
<div class="lev"></div>
</div>
</div>
</body>
<script>
window.onload = function () {
stars(5); // 满分 5 分 根据 html 自定义星星数
};
var leval = [
"1分,很不满意",
"2分，不满意",
"3分，一般",
"4分，满意",
"5分，非常满意",
];
function stars(size) {
//获取总的星星数
var stars = document.querySelectorAll(".stars> img");
// 得分数组
var scores = [];
// 评分项数组
var starArrs = [];
//数组分割
for (var i = 0; i < Math.ceil(stars.length / size); i++) {
var start = i * size;
var end = start + size;
//初始评分为0
scores.push(0);
starArrs.push([].slice.call(stars, start, end));
}
console.log("starArrs", starArrs);
// 事件委托父元素
document.querySelector(".stars-wrapper").onclick = function (e) {
//获取点击的星星 在 总数组中的index
var index = [].indexOf.call(stars, e.target);
// 如果点击的 不是星星
if (index === -1) return;
// 判断 该星星归属 评分项数组
var i = parseInt(index / size);
var starArr = starArrs[i];
// 计算归属评分项 的评分
index = index % size;
// 评分未更改
if (index === scores[i] - 1) {
console.log(scores);
return scores;
}
scores[i] = index + 1;
// 此处为添加评价文字效果
var lev = document.getElementsByClassName('lev')[i];
lev.innerHTML= leval[scores[i]-1]
//显示评分红色托马斯基柴夫波娃效果
starArr.forEach(function (star, i) {
if (i <= index) {
star.src = "./images/light.png";
} else {
star.src = "./images/gray.png";
}
});
console.log(scores);
return scores;
};
}
// 数组分割 可以自定义成一个函数
function arrayChunck(arr, size) {
if (!arr.length) return;
var arrs = [];
for (var i = 0; i < Math.ceil(arr.length / 7); i++) {
var start = i * size;
var end = start + size;
arrs.push([].slice.call(arr, start, end));
}
return arrs;
}
</script>
<style>
img {
width: 20px;
height: 20px;
}
.stars {
background: yellowgreen;
padding: 5px;
margin-bottom: 10px;
}
.stars span {
display: inline-block;
width: 20px;
height: 20px;
background: #ccc;
margin-right: 10px;
}
/* 显示评分数 */
span.active {
background: red;
}
</style>
</html>
