<html>
<head>
</head>
<body bgcolor="black">
<script>
//创建下面的div , 子div的个数是2-7
/*
<div style="float:left">
<div>1</div>
<div>0</div>
<div>1</div>
<div>0</div>
<div>1</div>
<div>0</div>
</div>
*/
function createDivWithRandom() {
//外层大的div
var bigDiv = document.createElement('div');
//子div的数目
var ranNum = 3 + parseInt(7 * Math.random());
//创建子节点
for(var i = 1 ; i <= ranNum ; i++) {
//小的div
var smallDiv = document.createElement('div');
smallDiv.style.color = 'white';
smallDiv.style.fontSize = '10px';
smallDiv.style.padding = '0px';
smallDiv.style.margin = '0px';
//里面的数字
var numText = (parseInt(100 * Math.random()) % 2) + '';
//textNode
var textNode = document.createTextNode(numText);
//小Div里面添加上textNode
smallDiv.appendChild(textNode);
//大的div里面添加上smallDiv
bigDiv.appendChild(smallDiv);
}
//为大的div添加style float:left
bigDiv.style.float = 'left';
//为大的div添加class属性
bigDiv.className = 'myDiv';
//为大的div添加style position:absolute
bigDiv.style.position = 'absolute';
bigDiv.style.display = 'none';
//添加到body尾部
document.body.appendChild(bigDiv);
//返回大的div
return bigDiv;
}
function getMaxHeightOfDivs() {
var divs = document.getElementsByTagName('DIV');
var maxHeight = 0;
for(var i = 0 ; i < divs.length ; i++) {
if(divs[i].className == 'myDiv') {
if(divs[i].offsetHeight > maxHeight) {
maxHeight = divs[i].offsetHeight;
}
}
}
return maxHeight;
}
//返回五行五列的数组 , 里面装的是大的div
function getArrayDivs() {
//外层数组
var divsArr = new Array();
for(var i = 0 ; i < 5 ; i++) {
//内层数组
var innerArr = new Array();
for(var j = 0 ; j < 5 ; j++) {
//内层数组中添加bigDiv
innerArr.push(createDivWithRandom());
}
//外层数组添加内层数组
divsArr.push(innerArr);
}
//返回大数组
return divsArr;
}
//得到窗口的尺寸
function getWindowSize() {
var docEle = document.documentElement;
var width = window.innerWidth || docEle.clientWidth || document.body.clientWidth;
var height = window.innerHeight || docEle.clientHeight || document.body.clientHeight;
return {
'width' : width ,
'height' : height
};
}
//其中height:窗口的最大高度
// divArrs:五行五列的bigDiv
// posObj:当前在屏幕的高度Object
/* {
'height' : 高度,
'index' : 当前是第几个
}
*/
function getMappedObject() {
//定义返回的结果
var resultObject = {};
//获得屏幕尺寸
var screenJson = getWindowSize();
//得到窗口的最大高度
var screenHeight = screenJson.height;
//赋值
resultObject.height = screenHeight;
//得到五行五列数组
var divArrs = getArrayDivs();
//赋值
resultObject.divArrs = divArrs;
//当前在屏幕高度的数组
var posObj = new Array();
//放五个值
for(var i = 0 ; i < 5 ; i++) {
var tmpObj = {};
//放入初始值height和index
tmpObj.height = parseInt(Math.random() * resultObject.height - getMaxHeightOfDivs() - 50);
tmpObj.index = 0;
//加入数组中
posObj.push(tmpObj);
}
//赋值
resultObject.posObj = posObj;
//返回map
return resultObject;
}
var map = getMappedObject();
function changeAll() {
var totalLength = map.divArrs.length ;
var divArrs = map.divArrs;
var posObj = map.posObj;
for(var i = 0 ; i < totalLength ; i++) {
//产生随机数
var index = posObj[i].index;
//调整div显示属性
for(var j = 0 ; j < 5 ; j++ ) {
divArrs[i][j].style.display = 'none';
}
//让高度向下走30
var currHeight = posObj[i].height + 30 ;
//如果高度大于屏幕的最大高度,则设置其高度为随机值 , div的下标加一
if(currHeight >= (map.height - divArrs[i][index].offsetHeight)) {
currHeight = parseInt(Math.random() * map.height - getMaxHeightOfDivs() - 50);
index = index + 1;
if(index == 5) {
index = 0;
}
}
//保存到map中
posObj[i].height = currHeight;
//设置left top值
divArrs[i][index].style.left = ((i + 1) * 10) + 'px';
divArrs[i][index].style.top = currHeight + 'px';
//设置当前div的显示属性
divArrs[i][index].style.display = 'block';
}
setTimeout('changeAll()' , 100);
}
changeAll();
</script>
</body>
</html>
模拟黑客帝国里面的文字下落
最新推荐文章于 2018-10-30 18:09:46 发布