前端开发者| 微信h5页面前端开发框架 |
| 企业端 前端开发框架 |
| 前端移动app开发框架 |
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style>
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;
}
</style>
</head>
<body>
<div>
<p>点击星星就能评分</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span>
<h6></h6>
<b></b>
</span>
<p style=”margin-top: 100px;”></p>
</div>
<script>
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 + ‘ ’ + txtValue[0].innerHTML
}
}
function setStar(num) {
for (var j = 0; j < num; j++) {
// liArr[j].style.backgroundPositionY = “-27px”;
liArr[j].style.backgroundColor = ‘blue’
}
}
</script>
</body>
</html>
| 前端开发三大框架 |
| 最流行前端开发框架对比 2016 |
| .net快速前端开发框架下载 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册