<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
height: 24px;
}
strong, .tips {
display: inline-block;
height: 24px;
line-height: 20px;
vertical-align: 5px;
}
.star {
display: inline-block;
width: 22px;
height: 24px;
background: url(‘images/xing.png‘) no-repeat;
cursor: pointer;
}
.star1 {
display: inline-block;
width: 22px;
height: 24px;
background: url(‘images/xing1.png‘) no-repeat;
cursor: pointer;
}
.star2 {
display: inline-block;
width: 22px;
height: 24px;
background: url(‘images/xing2.png‘) no-repeat;
cursor: pointer;
}
</style>
<script>
/*
* 当鼠标移入的时候，显示哪些星星，隐藏哪些星星
* 当鼠标移出的时候，显示哪些星星，隐藏哪些星星
*
* 找到，鼠标移入或者移出，从0到几是亮的，剩下的自然就是灰色的
*
* 其实要找的就是移入或者移出的时候，星星亮到哪个值
* 我们可以定义一个变量表示这个值：m
*
* 移入：m = 鼠标移入的当前元素的索引
* 移出：m = 点击后的分数(v)
* */
window.onload = function() {
var stars = document.querySelectorAll(‘.star‘);
var tips = document.getElementById(‘tips‘);
var m = -1;
var v = 0;
var text = [
‘很差‘,
‘较差‘,
‘一般‘,
‘良好‘,
‘优秀‘
]
//从0-m高亮，m-最后取消高亮
function light() {
for (var i=0; i<stars.length; i++) {
//表示从0到m的星星亮起来
if (i <= m) {
if (m < 2) {
stars[i].className = ‘star1‘;
} else {
stars[i].className = ‘star2‘;
}
} else {//剩下都是灰色的
stars[i].className = ‘star‘;
}
}
if (m < 0) {
tips.innerHTML = ‘还没有评分哦!‘;
} else {
tips.innerHTML = text[m];
}
}
for (var i=0; i<stars.length; i++) {
stars[i].index = i;
//给所有星星添加鼠标移入的函数 - onmouseover
stars[i].onmouseover = function() {
m = this.index;
light();
}
//给所有星星添加鼠标移出的函数 - onmouseover
stars[i].onmouseout = function() {
m = v - 1;
light();
}
//给所有星星添加鼠标点击的函数 - onmouseover
stars[i].onclick = function() {
v = this.index + 1;
}
}
}
</script>
</head>
<body>
<div id="box">
<strong>总体评价：</strong>
<span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
<span id="tips" class="tips">还没有评分哦!</span>
</div>
</body>
</html>
实现效果