这篇文章将为大家详细讲解有关js星星打分效果如何实现，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
最终效果如下
html部分
<div class="container">小主的评价：</div>
<span></span>
css样式
<style>
.star {
font-size: 20px;
color: gold;
cursor: pointer;
}
.container {
display: inline-block;
text-align: center;
}
</style>js部分
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
let count = 5
let score = 3
for (let i = 0; i < count; i++) {
let star = $("<i/>").addClass("iconfont").addClass("star")
if (i < score) star.addClass("icon-xingxing")
else star.addClass("icon-xingxing1")
$(".container").append(star)
}
$(".star").mouseenter(function () {
let index = $(this).index()
$(".star").each(function (i) {
if (i <= index)
$(this).addClass("icon-xingxing").removeClass("icon-xingxing1")
else
$(this).addClass("icon-xingxing1").removeClass("icon-xingxing")
})
})
$(".star").mouseleave(function () {
$(".star").each(function (i) {
if (i < score)
$(this).addClass("icon-xingxing").removeClass("icon-xingxing1")
else
$(this).addClass("icon-xingxing1").removeClass("icon-xingxing")
})
})
$(".star").click(function () {
score = $(this).index() + 1
$("span").html(`${score}分`)
})
$("span").html(`${score}分`)
})
</script>关于js星星打分效果如何实现就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。