练习demo

最新推荐文章于 2024-10-29 18:59:46 发布

原创最新推荐文章于 2024-10-29 18:59:46 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#点赞

本文分享了一个优化后的点赞组件实现，通过HTML、CSS和JavaScript代码详细展示了如何创建动态且交互友好的点赞效果，包括颜色变化和动画过渡。

点赞组件（优化版）

直接上代码了：

<!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,传上来了，么么哒！