小项目-星级评分系统

来源：互联网发布：社交网络的好处和坏处编辑：程序博客网时间：2024/05/09 08:51
<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>
该项目源码：点击这里
0 0