setTimeout()改变CSS字体

JavaScript: setTimeout() changes CSS font

本文关键字：CSS 字体 改变 setTimeout      更新时间：2023-09-26

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

我已经在一个CSS文件中设置了网页正文的字体:

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

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

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控制台，但character[1]出现在字体Times New Roman 100毫秒后。这是延迟的不良影响，我想知道如何阻止它干扰我在CSS文件中设置的字体。我该怎么做呢?知道如何在使用时间延迟时维护CSS设置是很有价值的。

尝试使用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之类的。

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

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

代替document。写入，使用带有id的div，然后设置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);
相关文章：