JS 被点击就会移动的球
水一篇之前帮同学写的试题
innerHTML 实现
第一反应是很久之前写过的，通过不停 innerHTML 以及随机数来达到变换位置的做法。
const body = document.getElementsByTagName('body')[0]; //获取<body>
function randomP(){ //随机数函数
return Math.round(Math.random() * (500 - 1)) + 1;
}
function spawn(){ //生成一个点击运行 spawn() 函数的按钮，同时将随机数代入样式获得坐标。
body.innerHTML="<button onclick='spawn()' style='left:"+ randomP() +"px;top:"+randomP()+"px'>球</button>";
}
spawn();//页面首次加载运行一次 spawn() 函数但是这样等于是每次点击都重新写入一个元素。
因为不是同一个元素，所以自然也无法使用 CSS 来获得 transition 动画过渡效果，即小球只会闪现。
.style 实现
将思路调整为点击修改小球坐标就可以。（其实这样才是正常思路，我只是想顺便提一嘴之前重复 innerHTML 的玩法很逆天）
可以用 *.style.[css] 来实现修改 style。
<button id="ball" onclick="change()">球</button>
<script>
function change(){
const ball = document.getElementById('ball'); //获取小球 id
ball.style.top=randomP(); //将 randomP() 代入 style 里的 top 值
ball.style.left=randomP(); //将 randomP() 代入 style 里的 left 值
}
change(); //页面加载完成先运行一次来让小球随机移动
function randomP(){ //随机数函数
return Math.round(Math.random() * (700 - 1)) + 1 + 'px'; //在结尾加上 px，省事。
}
</script>然后改一下定位也是必须的，不然 top 和 left 不会有效果。
顺便加上过渡动画。
#ball{
position: absolute;
transition: all .5s;
}后记
更完美的做法还得在随机数函数这块获取窗口大小，再根据窗口大小来生成随机数。 随机数这东西还没研究过，有空再看看。
样式是有的，删了。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
