java满天星随机变颜色,随机生成10*10方块,并实现随机变色

闲来无聊,做个小东西玩 , 在body中随机生成10*10方块 , 并实现 随机 颜色

首先 介绍一个 新的 概念 文档碎片

1.概念

经JS操作DOM节点可以是节点的单位,让我们连接节点,能够createElement,createTextNode,然后，appendChild定在一起,然后再用appendChild或insertBefor加入到DOM树中.但假设要往DOM树中动态加入大量的节点.就会非常麻烦.并且每次都会刷新DOM。造成性能上的缺陷。

2.

效果图

我是效果图

function createBox(){

console.log("createBox");

//创建盒子的方法

document.body.innerHTML = "";//先清空 body里面的内容

//下面是 获取 浏览器的宽高

var mWidth = document.documentElement.clientWidth || docuemnt.body.clientWidth;

var mHeight = document.documentElement.clientHeight || document.body.clientHeight;

// console.log(mWidth);

// console.log(mHeight);

//分 10 份

var nDivWidth = mWidth/10;

var nDivHeight = mHeight/10;

// console.log(nDivWidth);

// console.log(nDivHeight);

//创建文档 碎片

var oFrag = document.createDocumentFragment();

for(var row=0;row<10;row++){

for(var col=0;col<10;col++){

var oDiv = document.createElement("div");

oDiv.style.position = "absolute";//绝对 定位

oDiv.style.height = nDivHeight +"px";

oDiv.style.width = nDivWidth + "px";

//每个div的位置

oDiv.style.left = nDivWidth * col + "px";

oDiv.style.top = nDivHeight * row + "px";

//下面随机生RGB颜色值, 随机 数介于 0-256之间

oDiv.style.background = "RGB("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";

//把每次创建 的div 追加给文档碎片

oFrag.appendChild(oDiv);

}

}

//最后一次性加 文档 碎片追加到body中,浏览器只渲染一次,提高性能

document.body.appendChild(oFrag);

}

// 让这些盒子的背景色随机发生变化的方法

function changeColor(){

document.getElementsByTagName('div').item(Math.random()*100).style.background = "RGB("+ Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";

}

// 当浏览器加载完成之后,运行fn方法 , 自动创建 背景颜色不同的10行10列小盒子,并且每隔两秒钟有一个小盒子颜色会变一次

window.onload = function(){

console.log("onload");

createBox();

window.setInterval(changeColor,100);

}

//方法名后面 不加括号, 加了括号 就表示 把这个方法的返回 值赋给 onresize事件了

window.onresize = createBox;

-----------------------------markDown 实践中, 不喜忽喷----------------------------------------