一.要达到的效果:
1.移入时,点亮星星;
2.移出时,取消点亮;
3.点击后移出,不取消点亮
二.效果图
源码链接:
链接: https://pan.baidu.com/s/1XullIdbJjuluFP4Zo4gGnQ 提取码: pbrd
源码文本:
-------------------------------------------------我是分割线-------------------------------------------------------------
<!DOCTYPE html>
<html lang="ZH-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
width: 500px;
height: 25px;
margin: 100px auto;
line-height: 25px;
}
.msg {
float: left;
padding-right: 10px;
}
ul {
float: left;
padding-left: 0;
margin: 0;
list-style: none;
/* margin: 100px auto; */
width: 200px;
height: 25px;
/* background-color: aqua; */
display: flex;
justify-content: space-between;
}
.msgBox{
float: left;
padding-left: 20px;
}
li {
width: 25px;
height: 25px;
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid gray;
border-radius: 50%;
}
li.on {
background-color: orange;
}
</style>
</head>
<body>
<div class="content">
<div class="msg"><span>评价:</span></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="msgBox"><span class="msgBoxText"></span></div>
</div>
<script>
let oLi = document.querySelectorAll("li"),
oUl = document.querySelector("ul"),
oMsgBox = document.querySelector(".msgBox .msgBoxText"),
msgArr = ["你可以评价一下吗?","极差","差","一般","好","非常好"];
var clickNum = -1;
oLi.forEach(function (item, index, arr) {
//悬浮圆圈时
item.onmouseenter = function () {
for (let i = 0; i < oLi.length; i++) {
var p = i <= index ? "add" : "remove";
oLi[i].classList[p]("on")
}
}
//点击圆圈时
item.onclick = function () {
clickNum = index
oMsgBox.innerHTML = msgArr[index+1]
}
})
oUl.onmouseleave = function () {
for (let i = 0; i < oLi.length; i++) {
var p = i <= clickNum ? "add" : "remove";
oLi[i].classList[p]("on")
}
}
oMsgBox.innerHTML = msgArr[0]
</script>
</body>
</html>
---------------------------------------------我是分割线----------------------------------------------------------------