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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。