css+html+js實(shí)現(xiàn)五角星評分

更新時間：2022年09月01日 11:51:10 作者：跑馬的漢子睡眠不足

這篇文章主要為大家詳細(xì)介紹了css+html+js實(shí)現(xiàn)五角星評分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了css+html+js實(shí)現(xiàn)五角星評分的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: