效果图 （静态）
* {
padding: 0;
margin: 0;
list-style: none;
}
.star {
font-size: 80px;
color: gold;
}
<div class="box1"> </div>
这是简单的CSS样式
在页面上创建一个div标签
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
引入JQuery数据库
let count = 10
// 表示有几个星星
let secor = 8
// 表示初始状态下点亮星星的个数
for (let i = 0; i < count; i++) {
let star = $("").addClass("iconfont star")
if (i < secor) {
star.addClass("icon-start-copy")
// 给下标小于secoe的星添加充实的星星
} else {
star.addClass("icon-star1")
// 给下标大于secoe的星添加空心的星星
}
// 写静态的星星
$(".box1").append(star)
// 将10个星星加入创建的DIV里
}
$(".star").mouseenter(function () {
let index = $(this).index()
// 下标
for (let i = 0; i < count; i++) {
let star = $(".star").eq(i)
// 遍历下表0到9的星星
if (i <= index) {
star.addClass("icon-start-copy").removeClass("icon-star1")
// 如果穿过的星星下表添加icon-start-copy类名 移除icon-star1类名
} else {
star.addClass("icon-star1").removeClass("icon-start-copy")
// 如果穿过的星星下表添加icon-start-copy类名 移除icon-star1类名 取反
}
}
// 触碰及点亮星星
})
$(".star").mouseleave(function(){
for (let i = 0; i < count; i++){
let star=$(".star").eq(i)
if(i
star.addClass("icon-start-copy").removeClass("icon-star1")
}
else{
star.addClass("icon-star1").removeClass("icon-start-copy")
}
}
})
$(".star").click(function(){
secor=$(this).index()+1
// 定义secor的值 这样会出现点击之后滑动过后任保持原来点击状态
})
这是评分的JQuery代码
