css+html+js实现五角星评分
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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">★</span>
<span data-value="2" class="star">★</span>
<span data-value="3" class="star">★</span>
<span data-value="4" class="star">★</span>
<span data-value="5" class="star">★</span>
</div>
</div>
</div>js：
<script type="text/javascript" class="lazy" data-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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
