点击按钮让元素移动停止
Posted lyl-0667
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击按钮让元素移动停止相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于点击按钮让元素移动停止的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript里面怎么点击按钮让计时停止，再次点击时工作？
如何让 avaudioplayer 在点击新闻歌曲时停止播放上一首歌曲？