本文展示了如何使用jQuery创建一个动态的满星和非满星评分系统。通过HTML、CSS和JavaScript代码，实现了评分星星的动态显示和用户交互功能，包括鼠标悬停显示下拉列表，选择分数后动态更新星星样式。代码简洁，适用于前端开发人员参考。
练习时，网上搜了下满星半星评分和样式，觉得有点复杂，摸索了一天，自己动手写了个demo，如果不需要jquery脚本动态控制，非常简单，唯一需要替换的就是你下载（推荐下载阿里字体图标库）的字体图标路径和具体星星字体；效果截图如下
水平有限，仅供大家参考，欢迎指正，谢谢！全部代码和说明如下；
<head>
<title>动态读取评分并设置满星和非满星</title>
<!-- 下载阿里图标库存放本地路径 -->
<link rel="stylesheet" href="../taobao/font/iconfont.css">
<script src="jquery.js"></script>
</head>
<body>
<style>
div,ul,span,p {
margin: 0;
padding: 0;}
.star,
.score,
.input-area {
display: inline-block;
height: 40px;
line-height: 40px;}
.star {
overflow: hidden;}
.iconfont {
font-size: 40px;
position: relative;
color: #999}
/* 当满星时颜色 */
.full {
color: red;}
/* 不使用js动态控制，禁用js ，就可以启用，只能静态控制满星数量和非满星的样式 */
/* span[data-s]::before{
content:attr(data-s);
color:red;
display: inline-block;
width:50%;
overflow: hidden;
position: absolute;
top:-1px;
left:0px;
} */
/* 非满星的样式，js动态添加非满星的位置 */
.no-full .new {
content: attr(data-s);
color: red;
display: inline-block;
<
最低0.47元/天 解锁文章
扫一扫
1703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
