来看看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>