(つづき)
背景色が暗いとき(gが低いとき）だけ文字色を白くしてみよう
方法1
複数条件をforの中に入れる
if(cnum[g]=='0' || cnum[g]=='3' cnum == '6'){
||はorの意味
これはあまりよくない。
方法2
if (g<3){
ele.style.color = '#FFF';
}
--->とりあえずできあがり。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web Safe Color</title>
<style>
body{
background:#cfc;
}
#chart{
list-style-type:none;
padding:0;
display:flex;
flex-wrap:wrap;
}
#chart li {
box-sizing:border-box;
width: 16.66%;
text-align:center;
padding:1rem;
border: solid 1px #cfc;
//text-shadow: 1px 1px 1px #fff;
font-size: 1.4rem;
}
</style>
</head>
<body>
</ul>
<script>
var cnum = ['0','3','6','9','C','F'];
var ul = document.getElementById('chart');
var counter = 0;
for(var r=0; r<6; r++){
for(var g=0; g<6; g++){
for(var b=0; b<6; b++){
var ele = document.createElement('li');
var code = '#'+cnum[r]+cnum[g]+cnum[b];
ele.innerHTML = '#'+cnum[r]+cnum[g]+cnum[b];
ele.style.background = code;
if (g<3){
ele.style.color = '#FFF';
}
ul.appendChild(ele);
}
}
}
</script>
</body>
</html>
