当我单击按钮时，我希望按钮的位置更改为随机位置。这是我尝试过的：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>
5 回答
qq_笑_17
TA贡献1818条经验 获得超7个赞
定义i并在方法j内部change()，以便单击按钮时可以随机更新。
另外，您的代码中存在拼写错误position: absoulte，应更正为absolute
var 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>
杨魅力
TA贡献1811条经验 获得超5个赞
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，则需要再添加一个条件
翻阅古今
TA贡献1780条经验 获得超5个赞
您需要将随机计算移至函数内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>
慕后森
TA贡献1802条经验 获得超5个赞
如果你想随机移动一个按钮，你可以使用简单的.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>
添加回答
举报
0/150
提交
取消