模拟黑客帝国里面的文字下落

shuaigg.babysky

浏览: 571164 次
性别:
来自: 济南

最近访客更多访客>>

sgqt

amu123456

ringphone

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

J#HTML

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

分享到：

mozilla中span设置宽度width , 画日历时发 ... | 根据相对url得到绝对url

2010-01-01 10:14
浏览 1154
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论