js实现星星打分效果
本文实例为大家分享了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实现星星打分效果 的全部内容, 来源链接: utcz.com/z/344066.html