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

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

#box{

width: 50px;

height: 50px;

position: absolute;

background: palevioletred;

}

stop

var speed = 10;

var flag = true;

var interId;

function moveLeft(){

var oldLeft = parseInt(box.style.left);

if(oldLeft >= window.innerWidth-50 || oldLeft < 0){

speed *= -1;

}

box.style.left = oldLeft + speed + "px";

}

function moveTop(){

var oldTop = parseInt(box.style.top);

if(oldTop >= window.innerHeight-50 || oldTop < 0){

speed *= -1;

}

box.style.top = oldTop + speed + "px";

}

function onOff(rand){

// var rand = 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的随机数

function random(){

rand = parseInt(Math.random() * 2 + 1);

alert(rand);

if (rand == 1) {

interId = setInterval("moveLeft()",50);

} else{

interId = setInterval("moveTop()",50);

}

}

random();

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