javascript - 为什么我的文字不闪烁？

Question

我想使用 javascript 使我的文本闪烁，但是...什么都没有

var blocus = document.getElementById('blocus');
var cas = 1;

function changer() {
    if (cas == 1) {
        blocus.style.color = "rgb(58, 83, 155)";
        cas = 2;
    }
    if (cas == 2) {
        blocus.style.color = "rgb(154, 18, 179)";
        cas = 1;
    }
}

setInterval(changer, 100);

我不明白为什么我的文字不是无限闪烁。请帮我。 我希望我的文本从一种颜色闪烁到另一种颜色，并且交替，无限....

Answer 1

您需要使用 if (...) {...} else if (...) {...} 模式而不是 2 if block 。

例如，当前在您的代码中 if cas === 1 then

1. 第一个 if block 将 cas 更改为 2。
2. 第二个if的条件是then cus === 2;//真
3. 调用进入第二个 if block
4. 第二个 if block 覆盖了第一个 block 所做的更改

因此您看不到颜色的明显变化。

if (cas === 1) {
    blocus.style.color = "rgb(58, 83, 155)";
    cas = 2;
} else if (cas === 2) {
    blocus.style.color = "rgb(154, 18, 179)";
    cas = 1;
}

var blocus = document.getElementById('blocus');
var cas = 1;

function changer() {
  if (cas === 1) {
    blocus.style.color = "rgb(58, 83, 155)";
    cas = 2;
  } else if (cas === 2) {
    blocus.style.color = "rgb(154, 18, 179)";
    cas = 1;
  }
}

setInterval(changer, 100);

div {
  height: 50px;
  font-size: 50px;
}

<div id="blocus">
  hello
</div>

DEMO