javascript 创建DIV块

来源：互联网发布：看门狗2卡顿优化补丁编辑：程序博客网时间：2024/05/16 04:43
<html>
  <head>
    <title>增加div块</title>
  </head>
    <script>
 function chardiv(){
  var time;
   this.creater=function(){
     var a=document.createElement("mydiv");//创建新的div块
 a.style.top=Math.random()*200;    
 a.style.left=Math.random()*200;
 a.style.position="absolute";  
 a.style.width=35;            //新div块的宽度
 a.style.height=35;          //新div块的高度
 a.innerHTML="A";             
 a.style.background="yellow";   //新div块的背景颜色
 mydiv.appendChild(a);
     this.move=function(){
  a.style.top=parseInt(a.style.top)+20;   //div块移动
   if(parseInt(a.style.top)>370){          //如果移动到大于370px
     a.style.top=0;                        //返回离top=0px
   }   
 }
   }
 }
 function stop(){
     clearInterval(time);        //清除定时器
   }
 function gamestart(){
   var charA=new chardiv();          //new 一个实例charA
   charA.creater();
   charA.move();
   time=setInterval(function(){   
     charA.move();
   },500);
  }
 </script>
    </head>
   <body>
     <button onclick="gamestart()">start</button>
 <button onclick="stop()">stop</button>
 <div id="mydiv" style="position:absolute;width:500;height:400;background:green;top:50"></div>
   </body>
</html>