JavaScript: setTimeout() changes CSS font

StackOverflow https://stackoverflow.com/questions/22314820

سؤال

I'm trying to make an ASCII art animation (a picture made using any of the 95 ASCII characters) using JavaScript and CSS. It's just meant to be a simple animation of a little guy blinking, nothing too complex. I use the setTimeout() method to insert a 100 ms delay between the animation frames, to make sure they don't go too fast.

I've set up the font of the body of webpage's text in a CSS file:

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

And I've scripted what the ASCII person looks like and the animation in a JavaScript file:

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);

The two values in the array "character" represent the character's animation frames, but they look extremely confusing in JavaScript due to reference codes. Not much I can do about showing you guys what they look like, as I'm new here and can't post images. It's not vital to solving the problem at hand, however.

Finally, here's the HTML file:

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

My problem is that, when the page is loaded, character[0] appears in the font Lucida Console, but character[1] appears 100 ms later in the font Times New Roman. This is an undesired effect of the delay, and I want to know how to stop it meddling with the font I set up in the CSS file. How would I go about doing this? It would be valuable to know how to maintain CSS settings while using a time delay.

هل كانت مفيدة؟

المحلول

Try using document.getElementById instead.

So:

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);

And put a span or something in your body.

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

Tested on jfiddle: http://jsfiddle.net/y5LLT/

نصائح أخرى

Instead of document.write, use a div with an id, and then set the inner HTML of the div, like so:

<!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>

And for the 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);
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top