JavaScript：setTimeout() 改变 CSS 字体答案

【问题标题】：JavaScript: setTimeout() changes CSS fontJavaScript：setTimeout() 改变 CSS 字体
【发布时间】：2014-03-11 11:09:57
【问题描述】：

我正在尝试使用 JavaScript 和 CSS 制作 ASCII 艺术动画（使用 95 个 ASCII 字符中的任何一个制作的图片）。它只是一个小家伙眨眼的简单动画，没什么太复杂的。我使用setTimeout() 方法在动画帧之间插入 100 毫秒的延迟，以确保它们不会过快。

我在 CSS 文件中设置了网页正文的字体：

body {font-family:"Lucida Console", Lucida, monospace;}

我已经编写了 ASCII 人物的样子和 JavaScript 文件中的动画：

var character = new Array();
  character[0] = "&nbsp_.._<br>&lto_o &gt<br>&nbsp.|_|.<br>&nbsp&nbspV V";
  character[1] = "&nbsp_.._<br>&lt-_- &gt<br>&nbsp.|_|.<br>&nbsp&nbspV V"

function blink() {
    document.write(character[1]);
    }

document.write(character[0]);
setTimeout((blink), 100);

数组“character”中的两个值表示角色的动画帧，但由于参考代码，它们在 JavaScript 中看起来非常混乱。我无法向你们展示他们的样子，因为我是新来的，无法发布图片。然而，这对于解决手头的问题并不重要。

最后，这是 HTML 文件：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
  <script src="Character.js"></script><br><br>
</body>
</html>

我的问题是，当页面加载时，character[0] 出现在字体 Lucida Console 中，但 character[1] 在 100 毫秒后出现在字体 Times New Roman 中。这是延迟的不良影响，我想知道如何阻止它干扰我在 CSS 文件中设置的字体。我该怎么做呢？了解如何在使用时间延迟的同时维护 CSS 设置会很有价值。

【问题讨论】：

jsfiddle.net/LW67s/3

标签： javascript html css fonts delay

【解决方案1】：

尝试改用 document.getElementById。

所以：

var character = new Array();
  character[0] = "&nbsp_.._<br>&lto_o &gt<br>&nbsp.|_|.<br>&nbsp&nbspV V";
  character[1] = "&nbsp_.._<br>&lt-_- &gt<br>&nbsp.|_|.<br>&nbsp&nbspV V"

function blink() {
    document.getElementById("blinker").innerHTML = character[1];
}

document.getElementById("blinker").innerHTML = character[0];
setTimeout((blink), 100);

并在你的身体里放一个跨度或其他东西。

<span id="blinker"></span>

在 jfiddle 上测试：http://jsfiddle.net/y5LLT/

【讨论】：

【解决方案2】：

使用带id的div代替document.write，然后设置div的内部HTML，如下所示：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
  <div id="character"></div>
  <script src="character.js"></script>
</body>
</html>

对于 JavaScript...

var character = new Array();
character[0] = "&nbsp_.._<br>&lto_o &gt<br>&nbsp.|_|.<br>&nbsp&nbspV V";
character[1] = "&nbsp_.._<br>&lt-_- &gt<br>&nbsp.|_|.<br>&nbsp&nbspV V";

function blink() {
  document.getElementById("character").innerHTML = character[1];
}

document.getElementById("character").innerHTML = character[0];
setTimeout(blink, 100);

【讨论】：

已编辑。我的错。脚本必须在 div 之后。