最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

js实现星级评分点击效果

今天这个例子可以说是在电商项目中经常用到,我们在购物确认收货后,会有一个给商家评分这一环节,怎么实现星级打分效果呢?那么接下来就为大家通过js实现星级评分效果,具体要求,当鼠标滑过星级会提示星级描述,点击星级评论可以打分,我会把源码附上,有需要的直接拿去就可以用。老规矩,先看一下效果图:

js实现星级评分点击效果

HTML代码

<html>
 <head></head>
 <body>
  <div id="star"> 
   <span>js星级评论打分</span> 
   <ul> 
    <li><a href="javascript:;">1</a></li> 
    <li><a href="javascript:;">2</a></li> 
    <li><a href="javascript:;">3</a></li> 
    <li><a href="javascript:;">4</a></li> 
    <li><a href="javascript:;">5</a></li> 
   </ul> 
   <span></span> 
   <p></p> 
  </div>
 </body>
</html>

CSS代码

* {
	margin:0;
	padding:0;
	list-style-type:none;
}
body {
	color:#666;
	font:12px/1.5 Arial;
}
/* star */
#star {
	position:relative;
	width:600px;
	margin:20px auto;
	height:24px;
}
#star ul,#star span {
	float:left;
	display:inline;
	height:19px;
	line-height:19px;
}
#star ul {
	margin:0 10px;
}
#star li {
	float:left;
	width:24px;
	cursor:pointer;
	text-indent:-9999px;
	background:url(images/star.png) no-repeat;
}
#star strong {
	color:#f60;
	padding-left:10px;
}
#star li.on {
	background-position:0 -28px;
}
#star p {
	position:absolute;
	top:20px;
	width:159px;
	height:60px;
	display:none;
	background:url(images/icon.gif) no-repeat;
	padding:7px 10px 0;
}
#star p em {
	color:#f60;
	display:block;
	font-style:normal;
}

javascript代码

window.onload = function (){
	var oStar = document.getElementById("star");
	var aLi = oStar.getElementsByTagName("li");
	var oUl = oStar.getElementsByTagName("ul")[0];
	var oSpan = oStar.getElementsByTagName("span")[1];
	var oP = oStar.getElementsByTagName("p")[0];
	var i = iScore = iStar = 0;
	var aMsg = [
				"很不满意|差得太离谱,与卖家描述的严重不符,非常不满",
				"不满意|部分有破损,与卖家描述的不符,不满意",
				"一般|质量一般,没有卖家描述的那么好",
				"满意|质量不错,与卖家描述的基本一致,还是挺满意的",
				"非常满意|质量非常好,与卖家描述的完全一致,非常满意"
				]
	for (i = 1; i <= aLi.length; i++){
		aLi[i - 1].index = i;
		//鼠标移过显示分数
		aLi[i - 1].onmouseover = function (){
			fnPoint(this.index);
			//浮动层显示
			oP.style.display = "block";
			//计算浮动层位置
			oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
			//匹配浮动层文字内容
			oP.innerHTML = "" + this.index + " 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "" + aMsg[this.index - 1].match(/\|(.+)/)[1]
		};
		//鼠标离开后恢复上次评分
		aLi[i - 1].onmouseout = function (){
			fnPoint();
			//关闭浮动层
			oP.style.display = "none"
		};
		//点击后进行评分处理
		aLi[i - 1].onclick = function (){
			iStar = this.index;
			oP.style.display = "none";
			oSpan.innerHTML = "" + (this.index) + " 分 (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
		}
	}
	//评分处理
	function fnPoint(iArg){
		//分数赋值
		iScore = iArg || iStar;
		for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";	
	}
}

以上就是前端开发的js星级评分效果的全部内容,很简单,由于时间倡促,所以详细的知识点不做过多的解释,有不合理的地方欢迎留言指正。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » js实现星级评分点击效果

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发