HTML [JAVASCRIPT]中的图像在几秒钟后更改
此代码我在某种程度上有效;它会改变,但速度很快,我希望在3秒左右后改变,但我无法找到如何改变。提前致谢!HTML [JAVASCRIPT]中的图像在几秒钟后更改
CODE:
<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left>
<script>
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;
setInterval(change_light,1);
function change_light() {
place += 1;
if (place > sequence.length -1) {
place = 0;
}
document.getElementById('theImage').src = sequence[place];
}
你应该setInterval的时期使用毫秒。试试这个请。我也简化了你的条件:
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;
var frameInterval = 1000; // milliseconds
setInterval(change_light, frameInterval);
function change_light() {
place++;
place = place % sequence.length;
document.getElementById('theImage').src = sequence[place];
}
非常感谢!总是希望提高:) – AntsOfTheSky
我可以问一下“place = place%sequence.length”的函数可以定义为什么?我假设它会和以前一样,只是没有if?出于某种原因,这使我有点困惑......你能否定义它的用途?我希望能够彻底明白:) – AntsOfTheSky
当然!它是一个余数运算符,当一个操作数除以第二个操作数时,该运算符返回余下的余数。更多关于它你可以在这里找到:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder – Antonio
这很简单,你什么都做对了!只是一个微小的变化: 函数setInterval(change_light,3000);应该接收它的时间以毫秒为单位,而不是以秒为单位。
,也是我想建议增加一些返回值给setInterval,那么你就可以,如果想用清除此计时器:
clearInterval(change_light_id);
,这里是你的固定码:
<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left>
<script>
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;
change_light_id = setInterval(change_light,3000);
function change_light() {
console.log(1);
place += 1;
if (place > sequence.length -1) {
place = 0;
}
document.getElementById('theImage').src = sequence[place];
}
</script>
非常感谢你! – AntsOfTheSky
如果您决定出现问题,请标记正确答案 – Antonio