点赞组件(优化版)
直接上代码了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d{border-radius:30px;width:260px;height:52px;border:1px solid black;position:absolute;margin-top:-25px;margin-left:-100px;top:50%;left: 50%}
#dd{width:260px;height:52px;position:absolute;margin-top:-25px;margin-left:-100px;top:40%;left: 50%}
#dd div{float:left;width:50px;height:50px;border-radius:50%}
#d div{transition:all 0.5s;float:left;width:50px;height:50px;border-radius:50%;border:1px solid black}
</style>
</head>
<body>
<div id="dd">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="d">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
var od=document.querySelectorAll("#d div");
var odd=document.querySelector("#d");
var od1=document.querySelectorAll("#dd div");
odd.addEventListener("mouseover",run3);
function run3() {
for (var i = 0; i < od.length; i++) {//od
od[i].index=i+1;
od[i].addEventListener("mouseover",run);
od[i].addEventListener("mouseout",run1);
}
}
for (var i = 0; i < od.length; i++){//od
od[i].index=i+1;
od[i].addEventListener("mouseover",run);
od[i].addEventListener("mouseout",run1);
}
for (var i = 0; i < od.length; i++) {//od
od[i].addEventListener("click", run2);
}
function run2() {
var color;
color=this.style.backgroundColor;
for(var j = 0; j <od.length; j++) {//od
od[j].style.backgroundColor="";
}
for(var j = 0; j <this.index; j++) {//this.index
od[j].style.backgroundColor=color;
}
for (var i = 0; i < od.length; i++) {//od
od[i].removeEventListener("mouseout",run1);
}
}
function run() {
var color;
for(var i = 0; i<od.length; i++){//od
od[i].style.backgroundColor="";
}
for(var j = 0; j <this.index; j++) { //this.index
for(var i = 0; i <od1.length; i++) {
od1[i].style.backgroundColor="";
od1[i].style.border="";
}
if(this.index<4&&this.index>=2){
od[j].style.backgroundColor="green";
}else if(this.index>=4){
od[j].style.backgroundColor="blue";
}else if(this.index<2){
od[j].style.backgroundColor="red";
}
color=this.style.backgroundColor;
od1[this.index-1].style.border="1px solid black";
od1[this.index-1].style.backgroundColor=color;
}
}
function run1() {
for(var i = 0; i<od.length; i++) {//od
od[i].style.backgroundColor="";
}
for(var i = 0; i <od1.length; i++) {//od1
od1[i].style.backgroundColor="";
od1[i].style.border="";
}
for(var j = 0; j <this.index; j++) {//this.index
od[j].style.backgroundColor="";
}
}
</script>
</body>
</html>
整理笔记时发现自己做的小demo,传上来了,么么哒!