閑來(lái)無(wú)聊,做個(gè)小東西玩 , 在body中隨機(jī)生成10*10方塊 , 并實(shí)現(xiàn) 隨機(jī) 顏色
</br>
首先 介紹一個(gè) 新的 概念 文檔碎片
</br>
1.概念
經(jīng)JS操作DOM節(jié)點(diǎn)可以是節(jié)點(diǎn)的單位,讓我們連接節(jié)點(diǎn),能夠createElement,createTextNode,然后潮梯，appendChild定在一起,然后再用appendChild或insertBefor加入到DOM樹(shù)中.但假設(shè)要往DOM樹(shù)中動(dòng)態(tài)加入大量的節(jié)點(diǎn).就會(huì)非常麻煩.并且每次都會(huì)刷新DOM逊谋。造成性能上的缺陷逾苫。
2.
效果圖
我是效果圖
<script type="text/javascript">
function createBox(){
console.log("createBox");
//創(chuàng)建盒子的方法
document.body.innerHTML = "";//先清空 body里面的內(nèi)容
//下面是 獲取 瀏覽器的寬高
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);
//創(chuàng)建文檔 碎片
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";//絕對(duì) 定位
oDiv.style.height = nDivHeight +"px";
oDiv.style.width = nDivWidth + "px";
//每個(gè)div的位置
oDiv.style.left = nDivWidth * col + "px";
oDiv.style.top = nDivHeight * row + "px";
//下面隨機(jī)生RGB顏色值, 隨機(jī) 數(shù)介于 0-256之間
oDiv.style.background = "RGB("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
//把每次創(chuàng)建 的div 追加給文檔碎片
oFrag.appendChild(oDiv);
}
}
//最后一次性加 文檔 碎片追加到body中,瀏覽器只渲染一次,提高性能
document.body.appendChild(oFrag);
}
// 讓這些盒子的背景色隨機(jī)發(fā)生變化的方法
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)+")";
}
// 當(dāng)瀏覽器加載完成之后,運(yùn)行fn方法 , 自動(dòng)創(chuàng)建 背景顏色不同的10行10列小盒子,并且每隔兩秒鐘有一個(gè)小盒子顏色會(huì)變一次
window.onload = function(){
console.log("onload");
createBox();
window.setInterval(changeColor,100);
}
//方法名后面 不加括號(hào), 加了括號(hào) 就表示 把這個(gè)方法的返回 值賦給 onresize事件了
window.onresize = createBox;
</script>
