[原创教程]JavaScript实现点击按钮按钮跑到别处
CSS程序代码:
.btn{ position: fixed; }
HTML
<button id="myButton" class="btn">按钮</button>
JS
程序代码:
const btn = document.getElementByID("myButton"); function handler() { var newX = 600 + Math.floor(Math.random() * 400); var newY = 600 + Math.floor(Math.random() * 400); btn.style.left = newX; btn.style.top = newY; } btn.addEventListener("click", handler)
原理解释:
首先,基本原理是当按钮被点击,调用回调函数,修改按钮x和y坐标
css解释:position必须不为默认的static才能使top和left生效
js详细解释:
首先,生成随机的新x和新y坐标
然后,修改css的top,left值以改变元素位置