练习demo

最新推荐文章于 2023-03-13 22:51:34 发布

jiepp

最新推荐文章于 2023-03-13 22:51:34 发布

阅读量148

点赞数

文章标签：评价

本文链接：https://blog.csdn.net/jiepp/article/details/101154576

版权

点赞组件

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!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("mouseover", run);
            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,传上来了，么么哒！

jiepp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习demo

点赞组件编辑器制作效果展示：代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d {border-radius: 30px...
复制链接

扫一扫