JavaScript之方块移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
position:absolute;
}
</style>
</head>
<body>
<button>移动</button>
<div style="top:30px;left:8px;"></div>
<script>
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);
}
}
</script>
</body>
</html>
