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