如何用CSS、HTML和JS制作长尾词形式的五角星评分系统？

本文共计543个文字，预计阅读时间需要3分钟。

原文：本文实例为大家分享了CSS+HTML+JS实现五星评分的具体代码，供大家参考，具体内容如下 + 效果图：

CSS:css.evaluation { text-align: center;}.title_15mh {}

HTML: 五星评分 ★ ★ ★ ★ ★

JavaScript:javascript// JavaScript代码用于根据点击的星级来更新评分document.getElementById('starRating').addEventListener('click', function(event) { var stars=document.querySelectorAll('#starRating span'); var rating=0; stars.forEach(function(star, index) { if (event.target===star) { rating=index + 1; } else { star.style.color='#ccc'; // 未点击的星级颜色 } }); // 根据点击的星级更新星级颜色 for (var i=0; i

效果：当用户点击某个星级时，所有星级都会根据点击的星级变色，显示出对应的评分。

本文实例为大家分享了css+html+js实现五角星评分的具体代码，供大家参考，具体内容如下

效果图：

css：

<style>         .evaluation {             text-align: center;         }         .title_15mhc {             font-size: 26px;             color: #252a30;         }         .stars {             margin: auto;             width: 54%;         }         .star {             font-size: 30px;             color: #FF8000;             margin-right: 5px;             -webkit-transition: all .3s;             cursor: pointer;         }         .hs {             color: #ccc;         } </style>

html：

<div class="evaluation">         <div class="title_15mhc" id="myd_box">             非常满意         </div>         <div style=" width:100%;text-align:center;">             <div class="stars">                 <span data-value="1" class="star">&#9733;</span>                 <span data-value="2" class="star">&#9733;</span>                 <span data-value="3" class="star">&#9733;</span>                 <span data-value="4" class="star">&#9733;</span>                 <span data-value="5" class="star">&#9733;</span>             </div>         </div>     </div>

js：

<script type="text/javascript" src="/jquery-1.9.1.min.js"></script>     <script>         $(function () {             var isclick = false;             $(".stars").hover(function () {             }, function () {                 if (isclick) {                     var level = $("#Level").val();                     if (level > 0) {                         $(".stars span").eq(level - 1).nextAll().addClass('hs');                     }                 }             });             $(".stars span").hover(function () {                 if (isclick) {                     $(this).removeClass('hs');                 }                 $(this).nextAll().addClass('hs');             }, function () {                 if (!isclick) {                     $(this).removeClass('hs');                     $(this).prevAll().removeClass('hs');                     $(this).nextAll().removeClass('hs');                 }             });             $(".stars span").click(function () {                 $(this).removeClass('hs');                 $(this).prevAll().removeClass('hs');                 var value = $(this).data("value");                 $("#Level").val(value);                 switch (value) {                     case 1:                         $("#myd_box").html("非常不满意");                         break;                     case 2:                         $("#myd_box").html("不满意");                         break;                     case 3:                         $("#myd_box").html("基本满意");                         break;                     case 4:                         $("#myd_box").html("满意");                         break;                     default:                         $("#myd_box").html("非常满意");                         break;                 }                 isclick = true;             });         }); </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。