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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

讓 setTimeout() 與加載頁面一起工作

讓 setTimeout() 與加載頁面一起工作

楊魅力 2022-11-27 17:16:42
我試圖在頁面加載后移動頁面中的元素。我試圖讓元素加載,然后在三秒鐘后移動。相反,元素只是在頁面加載時立即移動。到目前為止,這是我的代碼:<!DOCTYPE html><html><style>  #container {    width: 400px;    height: 400px;    position: relative;  }    #animate {    width: 50px;    height: 50px;    position: absolute;    background-color: red;  }</style><body id="body">  <div id="container">    <div id="animate"></div>  </div>  <script>    var elem = document.getElementById("animate");    function myMove(element) {      var posx = 0;      var posy = 25;      var opacity = 0;      var id = setInterval(frame, 40);      function frame() {        if (posx == 10) {          clearInterval(id);        } else {          posx++;          opacity = opacity + .1          element.style.top = posy + "%";          element.style.left = posx + "%";          element.style.opacity = opacity;        }      }    }    document.getElementById("body").addEventListener("load", setTimeout(myMove(elem), 3000))  </script></body></html>
查看完整描述

3 回答

?
繁星點點滴滴

TA貢獻1803條經驗 獲得超3個贊

你需要做

setTimeout(() => myMove(elem), 3000)

否則它會為任何myMove(elem)返回設置超時,這意味著myMove(elem)立即運行


查看完整回答
反對 回復 2022-11-27
?
翻過高山走不出你

TA貢獻1875條經驗 獲得超3個贊

所以基本上你需要這個:


// Run at DOM loaded

document.addEventListener("DOMContentLoaded", function() {

  console.log('DOM is loaded');

  // Move

  setTimeout(function(){ myMove(elem); }, 3000)

});

或者



// Run at full page load

window.addEventListener("load", function() {

  console.log('Page is loaded');

  // Move

  setTimeout(function(){ myMove(elem); }, 3000)

});


查看完整回答
反對 回復 2022-11-27
?
紅糖糍粑

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

目前,這些myMove方法會立即執行。為避免這種情況,您可以使用 ES6 中支持的箭頭函數或移動myMove到一個函數


使用箭頭函數(在 ES6 中支持):


document.getElementById('body').addEventListener(

  'load',

  setTimeout(() => myMove(elem), 3000),

);

轉換為函數


document.getElementById('body').addEventListener(

  'load',

  setTimeout(function () {

    myMove(elem);

  }, 3000),

);


查看完整回答
反對 回復 2022-11-27
  • 3 回答
  • 0 關注
  • 176 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號