Question

嘿所以我开发了这个代码，允许我根据计时器更改图像。随着倒计时达到某些里程碑，图片会发生变化。但不幸的是，我不能按照预期的方式工作。

<!DOCTYPE html>
<html>
<body>
<h1> Change the lights automatically</h1>

<img id="myimg" src="1.png" width ="100" height="300">

<script>

var list = [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg"
];

var count = 0;
var time=20;

var timing=setInterval(timer, 1000); //1000 will  run it every 1 second

function timer()
(
    var newImage = document.getElementById('myimg');
    time = time-1

    if (time <= 1) time = 20;
    if (time >15 && time < 21) count = 0;
    if (time >10 && time <16) count = 1;
    if (time >6 && time <15) count = 2;
    if (time >1 && time <5) count = 3;
    if (time = 0) count = 0;

    var newImage = document.getElementById('myimg');
    newImage.src = list[count];
}

</script>
</body>
</html>

我所做的是，代码应该有一个每秒运行一次的计时器，当计时器在一定数量之间时，计数值应该相应地改变。之后因为每次计数值改变时我都设置了要更改的新图像，所以显示的图像应该改变，但事实并非如此，因为它不会改变。任何专家都可以确定它有什么问题所以我可以解决它？提前谢谢！

Answer 1

最终if条件将时间指定为0。

if (time = 0) count = 0;

时间永远是0所以

newImage.src = list[count];

始终显示相同的图像。删除最终的if条件并修改第一个。

if ((time >15 && time < 21) || (time == 0)) count = 0;

Answer 2

你错过了大括号......

功能计时器（）（

......应该是

功能计时器（） {

Answer 3

这是因为计时器功能的时间总是19或时间-1 你可以考虑看看这个 javascript setInterval() and Variable Scope

希望这有帮助

检查以下代码段

var list = [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg"
];

var count = 0;
var time=20;

var timing=setInterval(timer, 1000); 
function timer()
{
var newImage = document.getElementById('myimg');
  
  time=time-1;
    if (time <= 1) time = 20;
    else if (time >15 && time < 21) count = 0;
    else if (time >10 && time <16) count = 1;
    else if (time >6 && time <15) count = 2;
    else if (time >1 && time <7){ count = 3;}
    else if (time == 0) count = 0;
  else 
  {
  clearInterval(timing);
  return;
  }
    var newImage = document.getElementById('myimg');
  console.log(newImage.src);
    newImage.src = list[count];
  }

<img id="myimg" src="1.png" width ="100" height="300">

如何解决这个图片不变的问题？

3 个答案: