<style>
body{
color:#666;
font:12px/2 Arial;
}
#star{
margin: 10px auto; /* border: 1px solid red; */
width: 800px;
position: relative; /*设置定位给p标签参考*/
}
ul{
list-style-type:none;
/* border: 1px solid green; */
margin: 0px 10px; /*必须设置外边距才能上去*/
}
ul,span{
float: left;
}
ul li{
float: left;
background: url('./images1/star.png') no-repeat;
text-indent: -9999px; /* 隐藏a标签中的文本 */
width: 24px;
margin: 0px;
}
#star li.on{
background-position:0 -28px;
}
p{ /*后面要根据鼠标变动,更改p,所以要设置定位*/
/* border: 1px solid blue; */
position: absolute;
top:20px;
width:200px;
display: none;
}
p em{
color: #f60;
display: block;
font-style: normal;
}
strong{
color: #f60;
padding-left: 20px;
}
</style>
<body>
<div id="star">
<span>点击星星就能打分</span>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
<span></span>
<p>选择解释</p>
</div>
</body>
<script>
//获取节点
var liObj = document.getElementsByTagName("li");
var pObj = document.querySelector("p");
var ulObj = document.querySelector("ul");
var spanObj = document.querySelectorAll("span")[1];
//保留评价的分数
var setScore = 0;
var msg = [
"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
"不满意|部分有破损，与卖家描述的不符，不满意",
"一般|质量一般，没有卖家描述的那么好",
"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
];
//2.使用for给li绑定移入事件
for(var i=0;i<liObj.length;i++){
liObj[i].index = i;
//绑定移入事件
liObj[i].onmousemove = function(){
//3.显示文字解释框,设置display
pObj.style.display = 'block';
//4.计算p的位置
//4.1获取ul距离父级左边的位置
var ulLeft = ulObj.offsetLeft;
//4.2使用当前li的索引,乘以li的宽高,编程p的实时位置
pObj.style.left = ulLeft+(this.index*this.offsetWidth)+'px';
//5.设置p中的显示文字
var info = msg[this.index].split('|');
pObj.innerHTML = "<em><strong>"+(this.index+1)+"分 "+info[0]+"</strong></em>"+info[1];
getPoint(this.index+1)
}
/********鼠标点击时打分********/
// 1 绑定点击事件
liObj[i].onclick = function(){
// console.log(1)
//2.获取点击li的索引值,索引值+1就是分数,要保存到变量setScore中
//给getPoint使用
setScore = this.index+1;
getPoint();
//3.将文字内容添加到span中
var info = msg[this.index].split('|');
var str = "<strong>"+(this.index+1)+"分 "+info[0]+"</strong>"+info[1];
spanObj.innerHTML = str;
//4.让跟随鼠标的文字消失
pObj.style.display = 'none'
}
/********鼠标移出事件********/
liObj[i].onmouseout = function(){
//1让跟随鼠标的文字消失
pObj.style.display = 'none';
//2.调用打分的函数
getPoint();
}
}
//添加评分的方法
function getPoint(sta){
//1.获取鼠标当前的所在的li的索引
var score = sta || setScore;
// console.log(score);
//2.遍历所有的star,就是li
for(var i=0;i<liObj.length;i++){
//2.遍历所有的star的下标,和目前鼠标所在的li进行对比,
//如果小于的就给on类
liObj[i].className = (i<score ? 'on' :'');
}
}
</script>
网友评论