js 星星效果思路

//星星的效果思路

1.获取需要修改的元素 ul li 跟p 布局

2.给li 加移入事件 更改提示框显示，

3.给li 加移出事件 更改提示框隐藏

4.给li加索引值代表自己的序号

5.在li移入时 添加循环从开始位置到选择的this.index位置 添加每个li的class

6.在li移出时 添加循环从开始位置到选择的this.index位置 删除每个li的class

7.声明一个数组存提示框的文字

8.在li移入时  修改p的文本

9.给每个li在加点击事件，根据li的this.index 可以获取点击那几个星星

html部分

<div id='div1'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>121</p>
</div>

css部分

ul,
ul li{
list-style: none;
margin:0 ;
padding:0 ;
}
ul:after{
clear: both;
display: block;
content: " ";
visibility: hidden;
}
#div1 ul li {
width:70px ;
height:85px ;
float: left;
background: url(img/star.png) -72px 0 no-repeat;
}
#div1 ul li.active{
background: url(img/star.png) 0px 0 no-repeat;
}
p{
width:300px ;
height: 30px;
border: 1px solid #2ECC71;
position: absolute;
top:20px;
left:360px;
display:none ;
text-align: center;
}

js部分

function getId(id){
return document.getElementById(id);
};
window.onload=function(){
var div1=getId('div1');
var list=div1.getElementsByTagName('li');
var p=document.getElementsByTagName('p')[0];

var arr=['较差','差评','中评','好评','非常满意']

var i;

for(i=0;i<list.length;i++){
list[i].index=i;
console.log()

list[i].onmouseenter=function(){
p.style.display='block';
p.innerHTML=arr[this.index];
for(var i=0;i<=this.index;i++){
list[i].className='active';
}
}
list[i].onmouseout=function(){
p.style.display='none';
for(var i=0;i<=this.index;i++){
list[i].className='';
}
}
list[i].onclick=function(){
alert('选中'+(this.index+1)+'星星')
}
}
}