JS星星评分

最新推荐文章于 2023-06-16 11:04:18 发布
置顶 最新推荐文章于 2023-06-16 11:04:18 发布
阅读量592 收藏
点赞数 1
文章标签： js css html5 jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Biu233/article/details/103830396
版权

本文链接

一个支持小数的星星评分

最近在开发过程中遇到了这个星星评分的需求，就自己写了一个。尽量的简化代码，支持多个、支持循环。废话不多说，直接上代码。
在这里插入图片描述
首先引入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>

本文链接

莫得香菜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现星星评分系统
苏灵均的博客
06-01 1765
思路： 1.排列五颗星星和一个按钮； 2.当鼠标移到星星上时，判断当前是第几颗星星i，将其包括之前的星星样式换成红色，之后的星星样式不变； 3.按下按钮时，将2中获取的i的值作为输出：‘i scores’; 4.注意单独考虑输出0分的情况。 ...
用JS生成星星打分的小例子
木木狐工作室
10-06 123
在内容区域用ul和5个li标签做一个初始状态，用一个span标签显示打分结果。用JS为li标签绑定onclick事件，并显示打分结果。设置样式，使ul和li水平显示。
js星星评价
03-08
这个是在购买商品后有个星星评价的那个效果.
js案例思路解析——五星评分效果
weixin_45048086的博客
09-09 1055
案例思路解析——五星评分效果 将结构和样式放前面是为了让思路更清晰，也可以先看后的步骤，再回来看着两部分辅助理解。 一、结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq
JS实现星星评分
honeyLu_88的博客
01-28 1478
越来越多的小程序和网站使用星星评分，如何用js实现星星评分，下面是我自己写的实现效果的代码。 html和css代码： js代码：
css实现小数点星级评分
shanghua1的博客
03-01 779
最近做项目有个类似星级评分的功能，不过是小数点的，刚开始想的是用css的一些高级属性，但是并没有达到想要的效果，最终还是用普通css和js实现了个。 先来个简易版的： html代码 <div class="box"> <div class="bottom star-wrap"> <span></span> <sp...
实现评价页面添加星星数量
weixin_30315905的博客
09-21 310
var num = finalnum = tempnum = 0; var lis = $(".star-box span"); //num:传入点亮星星的个数 //finalnum:最终点亮星星的个数 //tempnum:一个中间值 function fnShow(num) { ...
纯Javascript星级评价反馈实现点亮星星页面，鼠标点击星星上，星星自动亮且有提交反馈按钮
feng89284800的博客
06-16 344
【代码】纯Javascript星级评价反馈实现点亮星星页面，鼠标点击星星上，星星自动亮且有提交反馈按钮。 因为就学了一年的网页前端，能力有限，如果出现bug，请谅解
使用 JS 实现评星效果
Youareseeing的博客
06-24 742
评星要求：思路：默认 5 颗未被点亮的星星，要完成点亮星星很简单，就是一个图片替换的过程。难点：是如何得到你所点击的星星的下标。解决方法：通过遍历数组，再通过 this 这个函数得到下标即可。最后再根据下标完成要求。放代码： 注：var index=1000; index是随便取得一个数字，for(var j=0;j...
js星星评分
s20001027的博客
09-27 536
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <titl...
JS实现星级评价
http://imziv.com
01-09 2556
说明： 　　本方法采用了Jquery库，暂时检测兼容IE8版本。本示例的2种颜色的星星都是放入了一张png图片当中，当然还有其他的一些实现思路。本示例展示的情况是当前页面只有一个星级评价的情况。 思路： 　　通过对星级显示元素的，mouseenter,mouseout,click 三个事件的监听，从而星星显示的个数。其中我用了2个变量（temp_value,choice_value）来存放当
Js星星评分
01-05
星星评分，超炫的评价效果，调用简单，可对接后台同时使用！
原生js星星评分
07-20
原生js星星评分
js星星评分效果
10-25
在这里和广大脚本之家站的朋友们分享一个使用js实现商城星星评分的效果，希望能给大家点帮助
JavaScript实现简单的星星评分效果
10-19
标题中的“JavaScript实现简单的星星评分效果”是指使用JavaScript编程语言来创建一个用户界面元素，让用户能够通过选择星星的数量来给出评分。这个效果通常用于在线评价系统，如电影、产品或服务的评分。在这个实例...
js版星级评分 入门级 原生js实现
椿湫小屋丶
07-05 1373
纯原生js版星级评分
js+css实现星级评分(支持小数点后一味)
weixin_30690833的博客
05-11 429
最近在学php，要整一个星级评分的效果的，找了很久，找到一个非常好的js实例。支持小数点一味显示，像百度啥的，都啥半分的。不爽！！要么就来3.8分，哈哈…… 原理上，是采用js+css实现，先整一张图片，如图，两颗星星，一颗亮，一颗暗，我们要做的就是用js和css控制图片显示的位置，从而达到评分的效果的。采用两层div，后一层全部用暗星拼接，顶层用亮星，并且控制其长度，...
vue、小程序实现星星评分功能
weixin_56848461的博客
06-30 1545
vue、小程序实现星星评分功能
【JavaScript】实现星级评论
Ai-Fairy的博客
08-30 1028
我们在网购的时候，经常看见给商品评论五星好评，那么这个星级评论是怎么实现的呢？
jquery 星星评分
最新发布
11-21
以下是使用jQuery实现星星评分的示例代码： ```html <!-- 在HTML中添加一个包含五个空白星星的容器 --> ``` ```javascript // 在JavaScript中添加以下代码 $(document).ready(function() { // 给每个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值