| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 64 人关注过本帖
标题:[原创教程]JavaScript实现点击按钮按钮跑到别处
只看楼主 加入收藏
emt1045
Rank: 1
等 级:新手上路
帖 子:6
专家分:0
注 册:2024-5-20
收藏
 问题点数:0 回复次数:0 
[原创教程]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值以改变元素位置
搜索更多相关主题的帖子: 教程 按钮 JavaScript 点击 Math 
2024-05-20 19:25
快速回复:[原创教程]JavaScript实现点击按钮按钮跑到别处
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.018079 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved