学习颜色搭配
作者：互联网
<!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;
}
</script>
</html>
标签：颜色,leftName,搭配,rightColor,学习,color,leftColor,002e9b,rightName 来源： https://www.cnblogs.com/linlinmailbox/p/16466153.html