小项目-星级评分系统

最新推荐文章于 2024-03-12 08:50:13 发布

lhh_12345

最新推荐文章于 2024-03-12 08:50:13 发布

阅读量704

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签：星级评分系统

本文链接：https://blog.youkuaiyun.com/lhh_12345/article/details/53404665

Javascript 专栏收录该内容

16 篇文章

订阅专栏

本文将介绍如何创建一个星级评分系统，通过源码分享详细步骤，帮助读者理解实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
<style type="text/css">
div{width:700px;margin:0 auto;position:relative;}
.one{ float:left;}
ul{ display:inline;}
li{background:url(../star.png) no-repeat top left; display:inline-block; width:19px; height:19px; font-size:0; line-height:0px;list-style:none; float:left; margin:0 2px; cursor:pointer;}
.on{ background:url(../star.png) no-repeat bottom left;}
p{ width:154px; height:55px; background:url(../icon.gif); background-size:contain; position:absolute; top:5px; left:60px; text-align:left; display:none; padding-top:5px; padding-left:5px;}
p,span,strong,em{font-size:12px; font-style:normal;}
em {color:red;display:block; }
</style>
</head>

<body>
<div>
<span class="one">点击星星就能打分</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span></span>
<p></p>
</div>
<script type="text/javascript">
var oStar=document.getElementsByTagName("li");
var msg=["很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
		 "不满意|部分有破损，与卖家描述的不符，不满意",
		 "一般|质量一般，没有卖家描述的那么好",
		 "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
		 "非常满意|质量非常好，与卖家描述的完全一致，非常满意"];
var oP=document.getElementsByTagName("p")[0];
/*var oLeft=oP.getAttribute("left").value;这里若采用getAttribute方法获的属性值取始终为null；原因是js获取的属性值如果不在标签中则无法获取，建议采用jquery*/
var oSpan=document.getElementsByTagName("span")[1];
var a;

for(var i=0;i<oStar.length;i++)
{  
  (function(i)/*这里用到闭包，因为在点击事件发生时，在当前作用域没有找到变量i，上溯到上层作用域时for循环已经遍历完成，此时i值为5，所以每次都只能执行最后一个事件，所以把需要执行的代码用函数包裹起来，保存变量i，直接调用*/
   { 
   
   function onMouseOver()
   {
	   for(var j=0;j<=i;j++)
	    {
	      oStar[j].setAttribute("class","on");
	    }
	  oP.innerHTML="<em><b>" + (i+1) + "</b> 分 " + msg[i].match(/(.+)\|/)[1] + "</em>" + msg[i].match(/\|(.+)/)[1]; 
	  oP.style.display="block";
	  oP.style.left=24*i+60+"px";
   }
   
 
  function onMouseOut()
  {
	for(var i=0;i<oStar.length;i++)
	    {  
		  oStar[i].removeAttribute("class","on");
	    }
	  oSpan.innerHTML="";
	  oP.innerHTML=""; 
	  oP.style.display="none";  
   } 
   
 
  function onClick()
  {
	for(var j=0;j<=i;j++)
	    { 
	      oStar[j].setAttribute("class","on");
	    }
	  oSpan.innerHTML="<strong>" +(i+1)+ " 分</strong> (" + msg[i].match(/\|(.+)/)[1] + ")";
	  oP.style.display="none";   
  }
  
   
   
   oStar[i].addEventListener("mouseover",function()
      {
	    onMouseOver();
	  },false);
   
	    
   oStar[i].addEventListener("mouseout",function()
      { 
	   if(!a)/*因为click和mouseout事件冲突，所以在执行mouseout事件时需要进行判断*/
	   {
		 onMouseOut();
	   }
	   else{
		 a=false;  
		 }
	  },false);
	  
   oStar[i].addEventListener("click",function()
      { 
	    a=true;
	    onClick();
		/*event.stopPropagation();阻止事件的冒泡行为，向上传播，但是在这里并没有用，这里是同一元素绑定事件相冲突*/
	  },false);  
      
   })(i);
}
</script>
</body>

该项目源码：点击这里