我试图在页面加载后移动页面中的元素。我试图让元素加载，然后在三秒钟后移动。相反，元素只是在页面加载时立即移动。到目前为止，这是我的代码：<!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)立即运行
翻过高山走不出你
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)
});
红糖糍粑
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),
);
添加回答
举报
0/150
提交
取消