如何让按钮点击时随机改变位置
当我单击按钮时，我希望按钮的位置更改为随机位置。
这是我尝试过的：
var b = document.querySelector("button");
b.addEventListener("click",change);
var i = Math.floor(Math.random()*500)+1;
var j = Math.floor(Math.random()*500)+1;
function change()
{
b.style.left = i+"px";
b.style.top = j+"px";
}
button{
margin-left: auto;
margin-right: auto;
display: block;
position: absoulte;
}
<button>
Hello World
</button>
汪汪一只猫浏览 67回答 5
5回答
-
qq_笑_17
定义i并在方法j内部change()，以便单击按钮时可以随机更新。另外，您的代码中存在拼写错误position: absoulte，应更正为absolutevar b = document.querySelector("button");b.addEventListener("click",change);function change(){ var i = Math.floor(Math.random()*500)+1; var j = Math.floor(Math.random()*500)+1; b.style.left = i+"px"; b.style.top = j+"px";}button{ display: block; position: absolute;}<button>abc</button> -
慕田峪9158850
使用此元素，您无法更改随机位置。 -
杨魅力
HTML :-<body> <div class="ctr"> <button class="button" id="movingbutton">Button</button> </div></body>CSS：- #movingbutton{ margin-left: auto; margin-right: auto; display: block; position: absolute; left : 20px; top : 50px; } body{ width : 100%; } .ctr{ width : 100%; height : 100%; }JS：- var b = document.querySelector("#movingbutton");b.addEventListener("click",change);function change(){let i =Math.abs(Math.floor(Math.random()*window.innerWidth-55))let j = Math.abs(Math.floor(Math.random()*window.innerHeight-21));console.log('here' , i ,j , b.style.left , b.style.top); b.style.left = i+'px'; b.style.top = j + "px";}如果您愿意，可以在这里查看：实时示例链接如果该按钮超出 window.innerWidth 和 window.innerHeight，则需要再添加一个条件 -
翻阅古今
您需要将随机计算移至函数内change()。要将元素保留在其包含元素中，您可以使用getBoundingClientRect(). （并考虑按钮的大小，以避免使用相同的按钮在右侧和底部重叠。）const c = document.querySelector(".container");const b = document.querySelector("button");function change() { const { width: cWidth, height: cHeight } = c.getBoundingClientRect(), { width: bWidth, height: bHeight } = b.getBoundingClientRect(), i = Math.floor(Math.random() * (cWidth - bWidth)) + 1, j = Math.floor(Math.random() * (cHeight - bHeight)) + 1; b.style.left = i + "px"; b.style.top = j + "px";}b.addEventListener("click", change);.container { position: relative; height: 50vh; width: 50vw; background-color: lightgray;}button{ position: absolute; display: block;}<div class='container'> <button type='button' id='shifty'>Click</button></div> -
慕后森
如果你想随机移动一个按钮，你可以使用简单的.bind()。当鼠标在按钮区域移动时，您也可以移动按钮（无需单击）。这是两个代码：点击代码var b = document.querySelector("#movingbutton");b.addEventListener("click",change);function change(){let i = Math.floor(Math.random()*500)+1;let j = Math.floor(Math.random()*500)+1;console.log('here' , i ,j , b.style.left , b.style.top); b.style.left = i+'px'; b.style.top = j + "px";}#movingbutton{ margin-left: auto; margin-right: auto; display: block; position: absolute; left : 20px;top : 50px;}body{ width : 100%;}.ctr{ width : 100%;height : 100%;}<body><div class="ctr"><button class="button" id="movingbutton">Button</button></div></body>鼠标移动代码var b = document.querySelector("#movingbutton");b.addEventListener("mousemove",change);function change(){let i = Math.floor(Math.random()*500)+1;let j = Math.floor(Math.random()*500)+1;console.log('here' , i ,j , b.style.left , b.style.top); b.style.left = i+'px'; b.style.top = j + "px";}#movingbutton{ margin-left: auto; margin-right: auto; display: block; position: absolute; left : 20px;top : 50px;}body{ width : 100%;}.ctr{ width : 100%;height : 100%;}<body><div class="ctr"><button class="button" id="movingbutton">Button</button></div></body>
随时随地看视频慕课网APP
相关分类
JavaScript