效果如下:
html部分: div部分的多个盒子
css部分
代码如下(可复制)
/*设置每个(单个)星星的大小或其他样式*/
.star {
margin-right: 4px;
font-size: 24px;
}
/*设置点亮的星星的样式 填充颜色*/
.filled-star {
/* 可以为已填充的星星设置样式 */
color: #008cda;
}
/*未点亮的星星,为空的星星*/
.empty-star {
color: #5d5c5c;
font-weight: bold;
/* 可以为空星星设置样式 */
}
js部分
document.addEventListener('DOMContentLoaded', function () {} 是为了监听DOMContentLoaded事件,当html文档解析完成会触发DOMContentLoaded,可去掉,也可换其它。
document.addEventListener('DOMContentLoaded', function () {
const boxes = document.querySelectorAll('.star-rating');
const numStarsPerBox = [3, 2, 4, 5, 5]; // 每个盒子中显示的星星数量
function addStarsToElement(element, numStars) {
// 清除之前的星星或内容
element.innerHTML = '';
// 添加填充的星星
for (let i = 0; i < numStars; i++) {
let star = document.createElement('span');
// 添加星星类名
star.classList.add('star', 'filled-star');
// 使用图标填充内容
star.textContent = '★'; // 或者使用Font Awesome图标
// 将星星添加到指定的元素中
element.appendChild(star);
}
// 创建空星星
for (let i = 0; i < 5 - numStars; i++) {
let star = document.createElement('span');
star.classList.add('star', 'empty-star');
star.textContent = '☆'; // 或者使用Font Awesome图标来表示空星星
element.appendChild(star);
}
}
boxes.forEach((box, index) => {
const numStars = numStarsPerBox[index] || 0;
addStarsToElement(box, numStars)
})
});
可以创建半星 (仅参考,没具体使用)
判断数量是否大于满星