首頁猿問如何讓按鈕點擊時隨機改變位置

如何讓按鈕點擊時隨機改變位置

JavaScript

汪汪一只貓 2024-01-18 10:51:02

當我單擊按鈕時，我希望按鈕的位置更改為隨機位置。這是我嘗試過的：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;

}

反對回復 2024-01-18

慕田峪9158850

TA貢獻1794條經驗獲得超7個贊

使用此元素，您無法更改隨機位置。

反對回復 2024-01-18

楊魅力

TA貢獻1811條經驗獲得超6個贊

HTML :-

<body>

<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，則需要再添加一個條件

反對回復 2024-01-18

翻閱古今

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;

}

? <button type='button' id='shifty'>Click</button>

</div>

反對回復 2024-01-18

慕后森

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>

<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>

<button class="button" id="movingbutton">Button</button>

</div>

</body>

反對回復 2024-01-18

5 回答
0 關注
366 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何讓按鈕點擊時隨機改變位置

如何讓按鈕點擊時隨機改變位置

5 回答

添加回答