寫出html頁面
2.
要明白製作色卡的關鍵是從255到0的遞減，不管是r,g,b中的哪一個。
2.1首先我們獲得用戶所想製作的基本色卡顏色，這時候涉及一個用戶得16進制顏色格式是否正確問題，我們用焦點消失函數來判斷是否格式正確。
2.2正確並且獲得之後將其中最大的一個顏色點擊進去。
2.3由Js內部函數將他加到239-255這個區間內，其他倆個顏色隨之增加。
2.4增加到最大之後，開始在定時器的頻段之下遞減，定時器裏面要創造子節點，子節點顏色要逐漸變深
2.5這就要求我們增大之後的顏色10進制數值要開始遞減，當創建了16個子節點之後，退出定時器，色卡製作完成。
2.6爲了增加用戶實際的體驗，寫一個重新制作色卡的功能，其實就是將節點全部清除，然後再進行從第一步的循環！
核心呢就是對於顏色的遞減問題，這也是色卡的核心問題
接着難點就是對最大的r,g,b顏色其中一個進行增加到239-255這個區間,這一步很難想象
實現效果圖：
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.4.1.js"></script>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100px;
background-color: #e0e0e0;
}
header div{
width:100%;
height: 16px;
}
.main{
width: 100%;
}
.color{
width: 800px;
height: 800px;
border: lightgreen 2px solid;
margin: 0 auto;
}
#submit{
background-color: #FFFFFF;
}
.color div{
height: 30px;
}
</style>
<body>
<header>
<div></div>
<form action="">
請嚴格按照步驟執行
1.請選擇你的16進制顏色
<input type="text" id="incolor" >
<br>
2.請選擇你的哪個顏色爲主顏色r,g,b
R<input type="radio" name="gender" value="r" id="gender1">
G<input type="radio" name="gender" value="g" id="gender2">
B<input type="radio" name="gender" value="b" id="gender3">
<br>
3.點擊提交
<button id="submit" type="button"> 提交選擇</button>
<button type="reset" id="reset">重新選擇顏色</button>
</form>
</header>
<div class="main">
<div class="color"></div>
</div>
<script type="text/javascript">
var R=0;
var G=0;
var B=0;
var i=0;
var timer=null;
var value=null;
main();
reset();
function main() {
//在主函數裏面進行調用
document.getElementById("incolor").addEventListener("blur",testColor);
}
function testColor() {
value= document.getElementById("incolor").value;
var flag=value.search("#[a-fA-F_0-9]{6}");
var length=value.length;
if (length==7&&flag==0){
//驗證成功之後
document.getElementsByTagName("header")[0].getElementsByTagName("div")[0].innerHTML="";
getcolor();
//找到最大顏色
maxcolor();
}
else {
document.getElementsByTagName("header")[0].getElementsByTagName("div")[0].innerHTML="16進制顏色格式錯誤";
document.getElementsByTagName("header")[0].getElementsByTagName("div")[0].style.color="red";
return;
}
}
function getcolor() {
var demo= document.getElementsByTagName("input")[0].value;
var r;
var g;
var b;
demo=demo.substring(1,7);
r=demo.substring(0,2);
g=demo.substring(2,4);
b=demo.substring(4,6);
R=parseInt(r,16);
G=parseInt(g,16);
B=parseInt(b,16);
}
function maxcolor() {
document.getElementById("gender1").onclick=function () {
//R最大
var r=add0(R);
R=r.substring(0,3);
var addnum=r.substring(4,6);
G=G+17*addnum;
B=B+17*addnum;
if(G>255){
G=255;
}
if(B>255){
B=255;
}
submit();
}
document.getElementById("gender2").onclick=function () {
//R最大
var r=add0(G);
G=r.substring(0,3);
var addnum=r.substring(4,6);
R=R+17*addnum;
B=B+17*addnum;
if(R>255){
R=255;
}
if(B>255){
B=255;
}
submit();
}
document.getElementById("gender3").onclick=function () {
//R最大
var r=add0(B);
B=r.substring(0,3);
var addnum=r.substring(4,6);
R=R+17*addnum;
G=G+17*addnum;
if(R>255){
R=255;
}
if(G>255){
G=255;
}
submit();
}
}
function time() {
timer=setInterval(function () {
if (i>14){
clearInterval(timer);
}
create();
changecolor();
i++;
},100)
}
function create() {
var child=document.createElement("div");
document.getElementsByClassName("color")[0].appendChild(child);
}
function changecolor() {
if(R<0){
R=0;
}
if(G<0){
G=0;
}
if(B<0){
B=0;
}
var color= 'RGB('+R+','+G+','+B+')';
document.getElementsByClassName("color")[0].getElementsByTagName("div")[i].innerHTML=color+" "+"#"+R.toString(16)+G.toString(16)+B.toString(16);
document.getElementsByClassName("color")[0].getElementsByTagName("div")[i].style.color="green";
document.getElementsByClassName("color")[0].getElementsByTagName("div")[i].style.background=color;
R=R-17;
G=G-17;
B=B-17;
}
function add0(who) {
var j=0;
if(who>=239&&who<=255){
j=0;
}
if(who>=222&&who<=238){
who=who+17*1;
j=1;
}
if(who>=205&&who<=221){
who=who+17*2;
j=2;
}if(who>=188&&who<=204){
who=who+17*3;
j=3;
}if(who>=171&&who<=187){
who=who+17*4;
j=4;
}
if(who>=154&&who<=170){
who=who+17*5;
j=5;
}if(who>=137&&who<=153){
who=who+17*6;
j=6;
}if(who>=120&&who<=136){
who=who+17*7;
j=7;
}if(who>=103&&who<=119){
who=who+17*8;
i=8;
}
if(who>=86&&who<=102){
who=who+17*9;
j=9;
}if(who>=69&&who<=85){
who=who+17*10;
j=10;
}if(who>=52&&who<=68){
who=who+17*11;
j=11;
}if(who>=35&&who<=51){
who=who+17*12;
j=12;
}if(who>=18&&who<=34){
who=who+17*13;
j=13;
}
if(who>=0&&who<=17){
who=who+17*14;
j=14;
}
return who+"#"+j;
}
function submit() {
document.getElementById("submit").onclick=function () {
time();
}
}
function reset() {
document.getElementById("reset").onclick=function () {
while(document.getElementsByClassName("color")[0].getElementsByTagName("div").length>=1){
document.getElementsByClassName("color")[0].removeChild(document.getElementsByClassName("color")[0].lastChild);
}
i=0;
main();
}
}
</script>
</body>
</html>