js 多个女孩行走(类构建)

桃扇骨 2021-07-24 19:48 287阅读 0赞

问题:用类来解决、this的运用、定时器内的this指向window  
定时器解决div移动、背景图片移动、创建女孩

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			div{ 
    				width:79px;
    				height:108px;
    				border:solid 1px red;
    				
    				position:absolute;
    				left:100px;
    				top:250px;
    				background-image:url(img/girl.png) ;
    				background-repeat: no-repeat;
    				background-position:0px -225px;
    				border:none;
    			}
    
    			
    		</style>
    	</head>
    	<body>
    	
    			
    		<script>
    
    			
    			function Girl(left,top){ 
    				
    				this.left=left;
    				this.top=top;
    				
    				//创建小女孩
    				this.init=function(){ 
    					this.div=document.createElement("div");
    					this.div.style.left=this.left+"px";
    					this.div.style.top=this.top+"px";
    					document.body.appendChild(this.div);
    					
    				}
    				//女孩移动
    				this.move=function(){ 
    					var ids=0;
    					
    					//注意定时器
    					var that=this; 
    					 this.timer=setInterval(function(){ 
    						//定时器内的this会指向window,所以在外面赋值this
    						that.left+=5;
    						//移动
    						that.div.style.left=that.left+'px';
    						
    						//消失
    						if(that.left>1400)
    						{ 
    							that.die();
    						}
    						
    						//改变图片
    						if(ids>7)
    						{ 
    							ids=0;
    						}
    						that.div.style.backgroundPosition=-79*ids+'px -216px';
    						ids++;
    						
    					},50)
    					
    				}
    				
    				this.die=function()
    				{ 
    					clearInterval(this.timer);
    					this.div.style.display="none";
    				}
    				
    				this.init();
    				this.move();
    			}
    			
    			//创建多个女孩
    		setInterval(function(){ 
    			new Girl(Math.random()*1400,Math.random()*800);
    			},10);
    			
    			
    		</script>
    	</body>
    </html>