让 setTimeout() 与加载页面一起工作
我试图在页面加载后移动页面中的元素。我试图让元素加载，然后在三秒钟后移动。相反，元素只是在页面加载时立即移动。到目前为止，这是我的代码：
<!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回答
-
繁星点点滴滴
你需要做setTimeout(() => myMove(elem), 3000)否则它会为任何myMove(elem)返回设置超时，这意味着myMove(elem)立即运行 -
翻过高山走不出你
所以基本上你需要这个：// Run at DOM loadeddocument.addEventListener("DOMContentLoaded", function() { console.log('DOM is loaded'); // Move setTimeout(function(){ myMove(elem); }, 3000)});或者// Run at full page loadwindow.addEventListener("load", function() { console.log('Page is loaded'); // Move setTimeout(function(){ myMove(elem); }, 3000)}); -
红糖糍粑
目前，这些myMove方法会立即执行。为避免这种情况，您可以使用 ES6 中支持的箭头函数或移动myMove到一个函数使用箭头函数（在 ES6 中支持）：document.getElementById('body').addEventListener( 'load', setTimeout(() => myMove(elem), 3000),);转换为函数document.getElementById('body').addEventListener( 'load', setTimeout(function () { myMove(elem); }, 3000),);
随时随地看视频慕课网APP
相关分类
JavaScript