如何用CSS、HTML和JS制作五角星评分系统？

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

原文示例为：本文字例为：大家分享了css++js实现五角星评分的具体代码，供大家参考，具体内容如下 + 效果图：css: style .evaluation { text-align: center; } .title_15mh“

简化改写为：示例：分享CSS、HTML、JS实现五角星评分代码，效果如下：CSS代码：.evaluation { text-align: center; }

本文实例为大家分享了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>

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