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

回到顶部