原生JS書寫點擊按鈕讓元素移動、中止

時間 2019-11-08

原文原文鏈接

<!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>點擊按鈕讓元素移動、中止</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
border-radius: 50px;
}
</style>
</head>
<body>
<button id="btn">開始</button>
<div id="myDiv" style="top: 50px;left:10px"></div>
<script>
let btnMy = document.getElementById("btn");
let btnDiv = document.getElementById("myDiv");
let toRight ='on';
let toBottom ='on';
//左右移動
let move = function(){
let divLeft = parseInt(myDiv.style.left);
if(toRight == 'on' && divLeft < innerWidth -100){
myDiv.style.left = parseInt(divLeft) + 1 +'px';
}else if(divLeft == innerWidth - 100 || toRight == 'off'){
toRight = 'off';
myDiv.style.left = parseInt(divLeft) - 1 + 'px';
if(divLeft == 0){
toRight = 'on'
}
}
// 上下移動
let divTop = parseInt(myDiv.style.top)
if(toBottom == 'on' && divTop < innerHeight -100){
myDiv.style.top = parseInt(divTop) + 1 +'px';
}else if(divTop == innerHeight - 100 || toBottom == 'off'){
toBottom ='off';
myDiv.style.top = parseInt(divTop) - 1 + 'px';
if(divTop == 0){
toBottom ='on'
}
}
}
// 綁定按鈕跟須要移動的元素
let stop;
btnMy.onclick = function(){
console.log(btn.innerText)
if(btn.innerText == '開始'){
btn.innerText = '暫停'
stop = setInterval(move,1)
}else{
btn.innerText = '開始';
clearInterval(stop)
}
}
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。