//星星的效果思路
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)+'星星')
}
}
}