css+html+js实现五角星评分

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

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

查看更多关于css+html+js实现五角星评分的详细内容...