js五星评价的制作方法

最新推荐文章于 2024-07-20 09:19:45 发布

天香自然，地上红豆

最新推荐文章于 2024-07-20 09:19:45 发布

阅读量566

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/tianxianghuiwei/article/details/136516457

版权

方法有两种，1、jquer插件；2、图片循环；

第一种、效果图

代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery星级评分插件RatingStars</title>
	<!-- Bootstrap core CSS -->
   <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome core CSS -->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style>
        a {
            color: #f1c40f;
        }

        a:hover,
        a:active,
        a:focus {
            color: #dab10d;
        }

        .rating-stars {
            width: 100%;
            text-align: center;
        }

        .rating-stars .rating-stars-container {
            font-size: 0px;
        }

        .rating-stars .rating-stars-container .rating-star {
            display: inline-block;
            font-size: 32px;
            color: #555555;
            cursor: pointer;
            padding: 5px 10px;
        }

        .rating-stars .rating-stars-container .rating-star.is--active,
        .rating-stars .rating-stars-container .rating-star.is--hover {
            color: #f1c40f;
        }

        .rating-stars .rating-stars-container .rating-star.is--no-hover {
            color: #555555;
        }
    </style>
</head>
<body>


    <div class="position-relative overflow-hidden p-3 p-md-6 m-md-3 text-center bg-light">
                 <a class="py-2 d-none d-md-inline-block" href="index.html" style="padding-right: 20px">使用示例</a>
		        <a class="py-2 d-none d-md-inline-block" href="index2.html" style="color: #161616;font-weight: 600;">事件示例</a>

        <div class="col-md-5 p-lg-5 mx-auto my-5">
         
            <div class="rating-stars block">
              <!--  <input type="number" readonly class="form-control rating-value" name="rating-stars-value" id="rating-stars-value"> -->
                <div class="rating-stars-container">
                    <div class="rating-star">
                        <i class="fa fa-star"></i>
                    </div>
                    <div class="rating-star">
                        <i class="fa fa-star"></i>
                    </div>
                    <div class="rating-star">
                        <i class="fa fa-star"></i>
                    </div>
                    <div class="rating-star">
                        <i class="fa fa-star"></i>
                    </div>
                    <div class="rating-star">
                        <i class="fa fa-star"></i>
                    </div>
                </div>
            </div>
            <br />
            <br />
        </div>
    </div>


	
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <script src="js/jquery.rating-stars.min.js"></script>
    <script>
        var ratingOptions = {
            selectors: {
                starsSelector: '.rating-stars',
                starSelector: '.rating-star',
                starActiveClass: 'is--active',
                starHoverClass: 'is--hover',
                starNoHoverClass: 'is--no-hover',
                targetFormElementSelector: '.rating-value'
            }
        };

        $(".rating-stars").ratingStars(ratingOptions);

        $(".rating-stars").on("ratingChanged", function (ev, data) {
            $("#ratingChanged").html(data.ratingValue);
        });

        $(".rating-stars").on("ratingOnEnter", function (ev, data) {
            $("#ratingOnEnter").html(data.ratingValue);
        });

        $(".rating-stars").on("ratingOnLeave", function (ev, data) {
            $("#ratingOnLeave").html(data.ratingValue);
        });
    </script>
</body>
</html>

使用前要有jquer插件库

第二种用循环

效果图

代码

for (let i = 0; i < res.data.length; i++) {
		    // let phot = res.data[i].score;
			let phot = parseInt(res.data[i].score);
			console.log(phot);
		    let stars = '';
		    for (let k = 0; k < phot; k++) { // 使用phot的数值进行循环
		        stars += `<p class='imgs'><img src="img/五角星.png" alt=""></p>`;
				console.log(stars);
		    }

使用这样的循环在相应的位置拼接