bom实现方块移动_JavaScript之方块移动

Document

div{

width: 100px;

height: 100px;

background-color: skyblue;

position:absolute;

}

移动

let btn = document.getElementsByTagName("button")[0];//获取按钮

let div = document.getElementsByTagName("div")[0];//获取移动的div

let switchDirX = 'on', switchDirY = 'on';//设置两个标识来跟踪x轴和y轴的运动情况

let move = function (){

let divLeft = parseInt(div.style.left);//将获取到的left值取整，去除后面的px单位

let divTop = parseInt(div.style.top);//将获取到的top值取整，去除后面的px单位

//x轴的运动

if (divLeft < innerWidth - 100 && switchDirX === 'on'){

div.style.left = divLeft + 1 +"px";

}

else if (divLeft === innerWidth - 100 || switchDirX === 'off'){

switchDirX = 'off';

div.style.left = divLeft - 1 + "px";

if (divLeft === 0){

switchDirX = 'on';

}

}

//y轴运动

if (divTop < innerHeight - 100 && switchDirY === 'on'){

div.style.top = divTop + 1 +"px";

}

else if (divTop=== innerHeight - 100 || switchDirY === 'off'){

switchDirY = 'off';

div.style.top = divTop - 1 + "px";

if (divTop === 0){

switchDirY = 'on';

}

}

}

btn.onclick = function () {

if (btn.innerHTML === "移动"){

btn.innerHTML = "暂停";

stopTimer = setInterval(move, 3);

}

else {

btn.innerHTML = "移动";

clearInterval(stopTimer);

}

}