一个支持小数的星星评分
最近在开发过程中遇到了这个星星评分的需求，就自己写了一个。尽量的简化代码，支持多个、支持循环。废话不多说，直接上代码。
首先引入JQ
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
css部分
.xing_body {
background-color: #dcdcdc;
width: 15px;
height: 15px;
overflow: hidden;
margin: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2px;
}
.xing {
display: flex;
margin: 10px;
}
.jindu {
height: 100%;
background-color: #ff5610;
position: absolute;
left: 0;
}
html部分
<a class="pingfen">
<div class="xing" id="div_0">
<input class="ceshi" type="hidden" name="" id="0" value="4.1" /><!-- 星星评分 -->
</div>
</a>
<a class="pingfen" style="margin-top: 40px;">
<div class="xing" id="div_1">
<input class="ceshi" type="hidden" name="" id="1" value="2.8" /><!-- 星星评分 -->
</div>
</a>
js部分
$(document).ready(function() {
var html = "";
html += '<div class="xing_body">';
html +=
'<svg style="width: 11px !important;height: 11px !important;z-index: 999;" t="1571127072846" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16104" width="100" height="100"><path d="M778.479 1002.496c-12.288 0-24.576-3.071-37.888-10.239L533.742 883.713c-5.12-3.072-12.288-5.12-20.479-5.12-7.168 0-15.36 2.048-20.48 4.096L286.959 992.257c-12.288 7.168-24.576 10.239-38.912 10.239-24.576 0-48.128-11.264-64.513-29.695-16.384-18.433-22.527-43.008-18.432-67.584l39.937-229.376c2.048-14.336-3.072-28.672-13.313-38.912L25.839 476.16C2.287 453.633-5.905 420.864 4.335 390.144c10.239-30.721 35.84-52.225 67.584-57.345l229.376-33.792c14.336-2.048 27.647-11.264 33.791-23.552l102.4-208.896c14.336-28.672 43.008-46.08 74.752-46.08s60.416 17.408 74.752 46.08l102.4 208.896c7.168 13.313 19.456 21.504 33.792 23.552L952.559 332.8c31.744 5.12 57.344 26.624 67.584 56.32 10.24 30.72 2.048 63.488-20.48 86.017L834.799 636.928c-11.265 10.24-15.36 24.576-13.313 38.912l38.912 228.352c4.096 24.576-2.048 49.152-18.432 67.584C826.607 991.232 803.055 1002.496 778.479 1002.496z" p-id="16105" fill="#ffffff"></path></svg>';
html += '<div class="jindu" style="width: 0px;"></div>';
html += '</div>';
for (i = 0; i < 5; i++) {
$(".xing").append(html);
}
$(".pingfen input").each(function() {
var fenshu = $(this).val(); //获取分数
var id = $(this).attr("id");
console.log(fenshu);
console.log("###" + id);
fenshu = fenshu * 1;
var zhengshu = parseInt(fenshu); //保留分数整数部分
console.log(zhengshu);
for (i = 0; i < zhengshu; i++) {
$("#div_" + id + " .xing_body").children("div").eq(i).css("width", "20px");
}
var width = (fenshu - zhengshu) / 1 * 15; //15为星块的宽度
width = width.toFixed(1);
width = width + "px";
console.log("~~~" + width);
$("#div_" + id + " .xing_body").children("div").eq(zhengshu).css("width", width);
});
});
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>在线点单</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html,
body {
margin: 0;
}
</style>
<style type="text/css">
.xing_body {
background-color: #dcdcdc;
width: 15px;
height: 15px;
overflow: hidden;
margin: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2px;
}
.xing {
display: flex;
margin: 10px;
}
.jindu {
height: 100%;
background-color: #ff5610;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<a class="pingfen">
<div class="xing" id="div_0">
<input class="ceshi" type="hidden" name="" id="0" value="4.1" /><!-- 星星评分 -->
</div>
</a>
<a class="pingfen" style="margin-top: 40px;">
<div class="xing" id="div_1">
<input class="ceshi" type="hidden" name="" id="1" value="2.8" /><!-- 星星评分 -->
</div>
</a>
<script type="text/javascript">
$(document).ready(function() {
var html = "";
html += '<div class="xing_body">';
html +=
'<svg style="width: 11px !important;height: 11px !important;z-index: 999;" t="1571127072846" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16104" width="100" height="100"><path d="M778.479 1002.496c-12.288 0-24.576-3.071-37.888-10.239L533.742 883.713c-5.12-3.072-12.288-5.12-20.479-5.12-7.168 0-15.36 2.048-20.48 4.096L286.959 992.257c-12.288 7.168-24.576 10.239-38.912 10.239-24.576 0-48.128-11.264-64.513-29.695-16.384-18.433-22.527-43.008-18.432-67.584l39.937-229.376c2.048-14.336-3.072-28.672-13.313-38.912L25.839 476.16C2.287 453.633-5.905 420.864 4.335 390.144c10.239-30.721 35.84-52.225 67.584-57.345l229.376-33.792c14.336-2.048 27.647-11.264 33.791-23.552l102.4-208.896c14.336-28.672 43.008-46.08 74.752-46.08s60.416 17.408 74.752 46.08l102.4 208.896c7.168 13.313 19.456 21.504 33.792 23.552L952.559 332.8c31.744 5.12 57.344 26.624 67.584 56.32 10.24 30.72 2.048 63.488-20.48 86.017L834.799 636.928c-11.265 10.24-15.36 24.576-13.313 38.912l38.912 228.352c4.096 24.576-2.048 49.152-18.432 67.584C826.607 991.232 803.055 1002.496 778.479 1002.496z" p-id="16105" fill="#ffffff"></path></svg>';
html += '<div class="jindu" style="width: 0px;"></div>';
html += '</div>';
for (i = 0; i < 5; i++) {
$(".xing").append(html);
}
$(".pingfen input").each(function() {
var fenshu = $(this).val(); //获取分数
var id = $(this).attr("id");
console.log(fenshu);
console.log("###" + id);
fenshu = fenshu * 1;
var zhengshu = parseInt(fenshu); //保留分数整数部分
console.log(zhengshu);
for (i = 0; i < zhengshu; i++) {
$("#div_" + id + " .xing_body").children("div").eq(i).css("width", "20px");
}
var width = (fenshu - zhengshu) / 1 * 15; //15为星块的宽度
width = width.toFixed(1);
width = width + "px";
console.log("~~~" + width);
$("#div_" + id + " .xing_body").children("div").eq(zhengshu).css("width", width);
});
});
</script>
</body>
</html>
版权声明：本文为Biu233原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。