html;gutter:true;
Color</p>
<pre><code> .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;
}
克莱因蓝#002e9b
靓丽黄#F5DF4D
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();//记得主动调用时间方法
</code></pre>
<p>
Original: https://www.cnblogs.com/linlinmailbox/p/16466153.html
Author: 霖霖的信箱
Title: 学习颜色搭配
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/607421/
转载文章受原作者版权保护。转载请注明原作者出处！