学习颜色搭配 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color</title>
    <style>
        .font-style {
            font-size: 50px;
            width: 50%;
            height: 1080px;
            display: flex;
            align-items: center;
            justify-content: center;
            float: left;
        }

        .left {
            background-color: #002e9b;
            color: #F5DF4D;
        }

        .right {
            background-color: #F5DF4D;
            color: #002e9b;
        }
    </style>
</head>

<body>
    <div class="container" id="container" onclick="changeColor()">
        <div class="left font-style" id="left">克莱因蓝#002e9b</div>
        <div class="right font-style" id="right">靓丽黄#F5DF4D</div>
    </div>
</body>
<script>
    var color = [
        {
            leftName: "克莱因蓝",
            leftColor: "#002e9b",
            rightName: "靓丽黄",
            rightColor: "#F5DF4D"
        },
        {
            leftName: "爱马仕橙",
            leftColor: "#ff770f",
            rightName: "浅灰",
            rightColor: "#c1c1c1"
        },
        {
            leftName: "中国红",
            leftColor: "#d7000f",
            rightName: "扶光",
            rightColor: "#f0c2a2"
        },
        {
            leftName: "栀子黄",
            leftColor: "#fac03d",
            rightName: "苔绿色",
            rightColor: "#697723"
        },
        {
            leftName: "淡酒红",
            leftColor: "#a27e7e",
            rightName: "淡黄色",
            rightColor: "#faead3"
        },
        {
            leftName: "低饱和黄",
            leftColor: "#d8caaf",
            rightName: "中绿",
            rightColor: "#96a48b"
        }
    ];
    var index = 0;
    //切换颜色
    function changeColor() {
        if (index < color.length - 1) {
            index++;
        } else {
            index = 0;
        }
        var left = document.getElementById("left");
        var right = document.getElementById("right");

        left.style.backgroundColor = color[index].leftColor;
        left.style.color = color[index].rightColor;
        left.innerText = color[index].leftName + color[index].leftColor;

        right.style.backgroundColor = color[index].rightColor;
        right.style.color = color[index].leftColor;
        right.innerText = color[index].rightName + color[index].rightColor;


    }
    //每5秒触发切换颜色的方法
    function forever() {
        changeColor();
        setTimeout(forever, 5000);
    }
    forever();//记得主动调用时间方法
</script>

</html>

 

 

posted @ 2022-07-11 13:55  霖霖的信箱  阅读(250)  评论(0)    收藏  举报