方法有两种，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);}使用这样的循环在相应的位置拼接
