javascript 创建DIV块

最新推荐文章于 2021-06-15 20:23:04 发布

何群杰

最新推荐文章于 2021-06-15 20:23:04 发布

阅读量768

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u011107187/article/details/12857035

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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