好资源导航 » 文章资讯 » js实现方块上下左右移动效果

js实现方块上下左右移动效果

2023-09-26 08:28:06 45

本文实例为大家分享了js实现方块移动的具体代码，供大家参考，具体内容如下







#box{
width:50px;
height:50px;
position:absolute;
background:palevioletred;
}

stop varspeed=10; varflag=true; varinterId; functionmoveLeft(){ varoldLeft=parseInt(box.style.left); if(oldLeft>=window.innerWidth-50||oldLeft<0){ speed*=-1; } box.style.left=oldLeft+speed+"px"; } functionmoveTop(){ varoldTop=parseInt(box.style.top); if(oldTop>=window.innerHeight-50||oldTop<0){ speed*=-1; } box.style.top=oldTop+speed+"px"; } functiononOff(rand){ //varrand=random(); if(flag){ btn.innerHTML="start"; clearInterval(interId); flag=false; }else{ btn.innerHTML="stop"; if(rand==1){ interId=setInterval("moveLeft()",50); //flag=true; }else{ interId=setInterval("moveTop()",50); //flag=true; } flag=true; } } btn.onclick=onOff; //产生一个1-2的随机数 functionrandom(){ rand=parseInt(Math.random()*2+1); alert(rand); if(rand==1){ interId=setInterval("moveLeft()",50); }else{ interId=setInterval("moveTop()",50); } } random();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

js实现方块上下左右移动效果

热门推荐

随机推荐