第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何讓按鈕點(diǎn)擊時(shí)隨機(jī)改變位置

如何讓按鈕點(diǎn)擊時(shí)隨機(jī)改變位置

汪汪一只貓 2024-01-18 10:51:02
當(dāng)我單擊按鈕時(shí)，我希望按鈕的位置更改為隨機(jī)位置。這是我嘗試過(guò)的：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貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊

定義i并在方法j內(nèi)部change()，以便單擊按鈕時(shí)可以隨機(jī)更新。


另外，您的代碼中存在拼寫錯(cuò)誤position: absoulte，應(yīng)更正為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>


查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
慕田峪9158850

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊

使用此元素，您無(wú)法更改隨機(jī)位置。



查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
楊魅力

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個(gè)贊

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

}

如果您愿意，可以在這里查看：實(shí)時(shí)示例鏈接

如果該按鈕超出 window.innerWidth 和 window.innerHeight，則需要再添加一個(gè)條件


查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
翻閱古今

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊

您需要將隨機(jī)計(jì)算移至函數(shù)內(nèi)change()。

要將元素保留在其包含元素中，您可以使用getBoundingClientRect().?（并考慮按鈕的大小，以避免使用相同的按鈕在右側(cè)和底部重疊。）

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>


查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
慕后森

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

如果你想隨機(jī)移動(dòng)一個(gè)按鈕，你可以使用簡(jiǎn)單的.bind()。當(dāng)鼠標(biāo)在按鈕區(qū)域移動(dòng)時(shí)，您也可以移動(dòng)按鈕（無(wú)需單擊）。這是兩個(gè)代碼：


點(diǎn)擊代碼


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>

鼠標(biāo)移動(dòng)代碼


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>


查看完整回答
反對(duì) 回復(fù) 2024-01-18
  • 5 回答
  • 0 關(guān)注
  • 410 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)