gpt4 book ai didi

javascript - Javascript无限背景变化与功能

转载 作者:太空宇宙 更新时间:2023-11-03 21:13:54 24 4
gpt4 key购买 nike

我很好奇是否有一种方法可以在用户停留在页面上时重复执行某个功能。我希望函数 f1() 重复更改 div #gallery 的颜色。这可能是一个不定式循环之类的,请帮助我。

function f1() {
setTimeout(
function() {
document.getElementById("gallery").style.backgroundColor = "blue";
}, 3000);
setTimeout(
function() {
document.getElementById("gallery").style.backgroundColor = "red";
}, 6000);
}
#gallery {
width: 500px;
height: 300px;
background-color: red;
}
<body onload="f1()">
<div id="gallery">

</div>
</body>

最佳答案

以前使用 setInterval 的方法真的很棒,但我个人喜欢对发生的事情有更多的控制,所以我使用这样的方法来重复:

fiddle

“肉和骨头”是这样一个循环:

const target = document.getElementById('target');
const colors = ["red", "blue", "purple", "black", "gray", "aliceblue"];
const randomColor = () => {
const randomInt = Math.floor(Math.random() * colors.length + 1);
return colors[randomInt];
}
const userStillOnPage = true;

function f1(newInterval, continueWith) {
target.style.background = randomColor();

if (userStillOnPage) {
setTimeout(continueWith || f1, newInterval || 1000);
}
}


f1();

这种方法可以很容易地做各种事情,比如通过改变间隔或什至注入(inject)不同的延续函数来加快循环速度。它非常强大并且很容易抽象成非常通用的东西!

关于javascript - Javascript无限背景变化与功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43853636/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com