rgb顏色值
阿新 • • 發佈：2018-12-29
來看看16581375種顏色
是完全用js做的
對js還不是特別的熟悉，好多用法都玩不轉，現在先將就一下吧。
我這有些bug，就是必須用滑鼠點，而且不管是點選哪一個，顏色值都是按照最新建立元素裡的內容去遞減的。而且新增在最前面。
慢慢學習吧。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標題</title> <style> body { margin: 0px; padding: 0px; } div{ overflow: hidden; float: left; } </style> <script language="JavaScript"> var id = 2; function c() { //獲取上一個新增的div裡的文字內容，最終我想要獲取到裡面的三個數字 var te = document.getElementById("" + id - 1 + "").innerText; var shuzu1 = te.split(';');//以“;”分隔第一次 var rshuzu = shuzu1[0].split(':');//以“:”分隔第二次 var gshuzu = shuzu1[1].split(':'); var bshuzu = shuzu1[2].split(':'); var r = rshuzu[1];//最終得到裡面的值 var g = gshuzu[1];//這樣的做法缺點就是格式要是規範的，要是裡面的符號不一致就不好弄了 var b = bshuzu[1]; //以下大致思路 // r g b // 255 255 255 開始 // 255 255 254 // 255 255 253 遞減 // ... ... ... // 255 255 0 判斷 當b<=0時b=255,g-1 // 255 254 255 // ... ... ... 這樣就有255x255x255種不同的結果，也就是16581375種顏色 b -= 1; if(b <= 0) { b = 255; g -= 1; if(g <= 0) { g = 255; r -= 1; if(r <= 0) { //當r<=0的時候,所有結果就都迴圈完了 alert("你已閱盡天下顏!"); //兩秒後關閉當前網頁 setTimeout(function(){window.close();},2000); } } } var div = document.createElement("div");//建立一個div節點 //給這個節點新增內容 div.innerHTML = '<div class="yang" onclick="c()" id="' + id + '" style="background-color: rgba(' + r + ',' + g + ',' + b + ',1)">顏色值r:' + r + ';g:' + g + ';b:' + b + '</div>'; //把節點新增到body裡面最前面的元素的前面 document.body.insertBefore(div, document.body.firstElementChild); id++; } </script> </head> <body> <div class="yang" onclick="c()" id="1" style="background-color: rgba(255,255,255,1);"> 顏色值r:255;g:255;b:255 </div> </body> </html>