js实现星星打分效果
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：解决Nuxt使用axios跨域问题
下一篇：jQuery实现简单飞机大战