<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style-type: none;
}
div.box {
margin: 50px auto;
width: 750px;
display: flex;
align-items: center;
/* justify-content: space-evenly; */
}
.box ul {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 120px;
margin: 0 10px;
}
.box ul li {
width: 20px;
height: 20px;
background: url("./imgs/star.png") 0 0 no-repeat;
cursor: pointer;
position: relative;
}
.box>p #score{
color: red;
font-weight: 900;
}
.box ul div {
box-sizing: border-box;
width: 180px;
height: 67px;
background: url("./imgs/icon.gif") 0 0 no-repeat;
position: absolute;
top: 100%;
left: -80px;
display: none;
padding: 10px 10px;
font-size: 12px;
}
.box .show {
display: block;
}
.box ul h3 {
color: red;
font-style: normal;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">
<h3>点击星星就能打分</h3>
<ul>
<li>
<div>
<h3></h3>
<p>
</p>
</div>
</li>
<li>
<div>
</div>
</li>
<li>
<div>
</div>
</li>
<li>
<div>
</div>
</li>
<li>
<div>
</div>
</li>
</ul>
<p>
<span id="score"></span>
<span id="info"></span>
</p>
</div>
<script>
var box = document.getElementsByClassName('box')[0];
var li = box.getElementsByTagName('li');
var score = document.getElementById('score');
var info = document.getElementById('info');
var starArr = ['很不满意', '不满意', '一般', '满意', '非常满意'];
var infoArr = ['差的太离谱,与卖家描述严重不符,非常不满', '部分破损,与卖家描述的不符合,不满意', '质量一般,没有买家描述那么好', '质量不错,与卖家描述基本一致,还是挺满意的',
'质量非常好,与卖家描述完全一致,非常满意'
]
var flag = true;
for (var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onmouseover = function () {
for (var j = 0; j <= this.index; j++) {
li[j].style.backgroundPositionY = '-28px';
}
this.firstElementChild.className = 'show'
this.firstElementChild.innerHTML = '<h3>' + (this.index + 1) + '分 ' + starArr[this.index] + '</h3><p>' +
infoArr[this.index] + '</p>'
}
li[i].onmouseout = function () {
if (flag) {
for (var j = 0; j <= this.index; j++) {
li[j].style.backgroundPositionY = '';
}
this.firstElementChild.className = ''
}
}
li[i].onclick = function () {
flag= false;
//先清空所有的样式
for (var i = 0; i < li.length; i++) {
li[i].style.backgroundPositionY = '0px';
}
// 设置当前的样式
for (var j = 0; j <= this.index; j++) {
li[j].style.backgroundPositionY = '-28px';
}
this.firstElementChild.className = ''
// 显示对应的评分
score.innerHTML = (this.index + 1) + '分'
info.innerHTML = '(' + infoArr[this.index] + ')'
}
}
</script>
</body>
</html>
星星评分
猜你喜欢
转载自blog.csdn.net/weixin_47459930/article/details/106653674
今日推荐
周排行