/p>

<

Document

div {

width: 500px;

height: 125px;

margin: 0 auto;

position: relative;

}

p {

display: inline-block;

float: left;

}

ul {

list-style: none;

float: left;

}

/*li{ background: url(“star.png”) no-repeat; width: 25px; height: 19px; float: left; cursor: pointer; }*/

li {

border: 1px solid #000;

width: 25px;

height: 19px;

float: left;

cursor: pointer;

}

/*span{ background: url(“icon.gif”) no-repeat; width: 179px; height: 67px; display: block; left: 92px; position: absolute; top: 36px; display:none; }*/

span {

border: 1px solid #000;

width: 179px;

height: 67px;

display: block;

left: 92px;

position: absolute;

top: 36px;

display: none;

}

h6 {

margin: 6px;

font-size: 4px;

color: red;

}

b {

font-size: 10px;

padding: 0 6px;

position: absolute;

}

var score = [

‘1分，很不满意’,

‘2分，不满意’,

‘3分，一般’,

‘4分，满意’,

‘5分，非常满意’,

]

var value = [

‘差得太离谱，与卖家描述的严重不符，非常不满’,

‘部分有破损，与卖家描述的不符，不满意’,

‘质量一般，没有卖家描述的那么好’,

‘质量不错，与卖家描述的基本一致，还是挺满意的’,

‘质量非常好，与卖家描述的完全一致，非常满意’,

]

var position = [92, 119, 146, 173, 200]

var liArr = document.getElementsByTagName(‘li’)

var txtScore = document.getElementsByTagName(‘h6’)

var txtValue = document.getElementsByTagName(‘b’)

var span = document.getElementsByTagName(‘span’)[0]

var p = document.getElementsByTagName(‘p’)[1]

var checkNum

for (var i = 0; i < liArr.length; i++) {

liArr[i].index = i

liArr[i].onmouseover = function() {

console.log(this.index)

setStar(this.index + 1)

txtScore[0].innerHTML = score[this.index]

txtValue[0].innerHTML = value[this.index]

span.style.display = ‘block’

span.style.left = position[this.index] + ‘px’

}

liArr[i].onmouseout = function() {

span.style.display = ‘none’

for (var m = 0; m < liArr.length; m++) {

// liArr[m].style.backgroundPositionY = “0”;

liArr[m].style.backgroundColor = ‘#FFF’

}

if (checkNum || checkNum == 0) {

setStar(checkNum + 1)

}

}

liArr[i].onclick = function() {

checkNum = this.index

for (var j = 0; j < liArr.length; j++) {

if (j < this.index + 1) {

// liArr[j].style.backgroundPositionY = “-27px”;

liArr[j].style.backgroundColor = ‘blue’

} else {

// liArr[j].style.backgroundPositionY = “0”;

liArr[j].style.backgroundColor = ‘#fff’

}

}

p.innerHTML =

txtScore[0].innerHTML + ‘&nbsp’ + txtValue[0].innerHTML

}

}

function setStar(num) {

for (var j = 0; j < num; j++) {

// liArr[j].style.backgroundPositionY = “-27px”;

liArr[j].style.backgroundColor = ‘blue’

}

}