客户评论打星星，显示满意度代码

最新推荐文章于 2023-10-25 12:56:26 发布

CL有木

最新推荐文章于 2023-10-25 12:56:26 发布

阅读量796

点赞数 1

文章标签：评价

本文链接：https://blog.csdn.net/weixin_44034696/article/details/89186295

版权

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#ul1{padding: 0;margin: 0;list-style: none;width:300px;height: 28px;}
		#ul1 li{float: left;background: url(../img/top3.jpg) no-repeat 0px 0px;margin-right: 20px; width:27px;height: 28px;}
		#ul1 .active{background: red;}
	</style>
</head>
<body>
	<ul id="ul1">
		<li class="active"></li>
		<li class=""></li>
		<li class=""></li>
		<li class=""></li>
		<li class=""></li>
	</ul>
	<div id="div"></div>
	<script>
		(function(){	
		var commEle=document.getElementById("div");
		function StarManage(){
			this.stars=document.querySelectorAll("#ul1 li");
			this.comms=['非常差',"一般","满意","非常满意","good"]
		}
		StarManage.prototype.changeStyle=function(ind){
			for(var i=0;i<this.stars.length;i++){
				this.stars[i].className="";
			}
			for(var j=0;j<=ind;j++){
				this.stars[j].className="active";
			}
		}
		StarManage.prototype.comment=function(ind){
			commEle.innerHTML=this.comms[ind];
			//评论文笔之后不允许Mouseover和click事件处理程序执行
			for(var i=this.stars.length;i>=0;i--){
				this.stars[i].null;
				this.stars[i].null;
			}
		}			
		var s=new StarManage();
		for(var k=0;k<s.stars.length;k++){
			s.stars[k].(function(ind){
				return function(){
					s.changeStyle(ind);
				}
			})(k);
			s.stars[k].(function(ind){
				return function(){
					s.comment(ind);
				}
			})(k);
		}			
})();
	</script>
</body>

CL有木

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
客户评论打星星，显示满意度代码

<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #ul1{padding: 0;margin: 0;list-style: none;width:300px;height: 28px;} #ul1 li{float: left;bac...
复制链接

扫一扫