你如何在Javascript中制作闪烁动画？答案

【问题标题】：How do you make a blinking animation in Javascript?你如何在Javascript中制作闪烁动画？
【发布时间】：2013-06-18 22:37:57
【问题描述】：

我试图通过在眼睛的“0”和“_”之间交替来使一些 ascii 艺术闪烁。我在下面粘贴了我目前拥有的代码。 ascii 人只是每隔几秒钟就闭上然后再睁开一次眼睛。我不明白为什么我的代码不起作用，我也愿意使用其他方式。谢谢！

<script type="text/javascript">
function startBlinking() {
   window.setInterval(blinking(),2000);
}

function blinking() {
    var left=document.getElementById("leftEye");
    var right=document.getElementbyId("rightEye");

    left.innerHTML="_";
    right.innerHTML="_";
    window.setTimeout(function(){
          left.innerHTML="0";
          right.innerHTML="0";
    },500);
}

startBlinking();
</script>

这是剩下的代码！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Girl</title>
    <style type="text/css">
        pre {
            font-family: monospace;
            font-size: small;
    }

</style>

<script type="text/javascript">

function startBlinking() {
   window.setInterval(blinking(),2000);
}

function blinking() {
    var left=document.getElementById("leftEye");
    var right=document.getElementbyId("rightEye");

    left.innerHTML="_";
    right.innerHTML="_";
      window.setTimeout(function(){
          left.innerHTML="0";
          right.innerHTML="0";
      },500);
}

function buttonClicked() {
  var lines=new Array();
  lines=["You should not stay up so late...",
                   "Light roast coffee please.",
                   "Fire Emblem is so good.",
                   "How's the weather today?",
                   "I hope you studied for finals.",
                   "What else should I say?",
                   "No more ramen for dinner.",
                   "Placement text",
                   "Placement text",
                   "Placement text"];

  var ran=Math.floor(Math.random()*10);
  var parsedStr=parse(lines[ran]);
  document.getElementById("text1").innerHTML=parsedStr[0];
  document.getElementById("text2").innerHTML=parsedStr[1];
  document.getElementById("text3").innerHTML=parsedStr[2];
}

function parse(str){
  var length=str.length;
  var strArray= new Array();
  strArray=["           ","           ","           "];

  if(length > 33) {
     return parse("Too many characters!");
  } else {
     if(length<11) {
         var spaces="";
         for(var i=0; i<(11-length);i++) {
            spaces+= " ";
         }
         strArray[0]=str.slice(0,length)+spaces;
     } else if(length>11 && length <22) {
         var spaces="";
         for(var i=0; i<(22-length);i++) {
            spaces+= " ";
         }
         strArray[0]=str.slice(0,11);
         strArray[1]=str.slice(11,length)+spaces;
     } else {
         var spaces="";
         for(var i=0; i<(33-length);i++) {
            spaces+= " ";
         }
         strArray[0]=str.slice(0,11);
         strArray[1]=str.slice(11,22);
         strArray[2]=str.slice(22,length)+spaces;
     }

     return strArray;
  } 
   }

   startBlinking();
   </script>
</head>
<body>
    <pre>
     _____        ,--------------,
    /////\\       |  <span id="text1">You should </span> |
   ///////\\      |  <span id="text2">not stay up</span> |
   \|<span id="leftEye">0</span> <span id="rightEye">0</span> \\\\     |  <span id="text3">so late... </span> |
   ||    /|||    &lt;,______________|
   //\^_,|\\\
  ||+--| |--_|
  |/  `-_-'  \
  /\/|  V   \_\
 / /\| __   |\ \
/ /  ||_ |) | \ \
\ \  ||\\|__|__\ \
 \ \ | \_________/
  \ \|      |
</pre>
<p><button type="button" id="talkButton" onclick="buttonClicked()">Talk</button></p>
</body>
</html>

【问题讨论】：

你能发布与此相关的 HTML 吗？

标签： javascript ascii-art blink

【解决方案1】：

您将undefined 传递给setInterval（因为这是blinking 的返回值）。改为传递函数引用：

function startBlinking() {
   window.setInterval(blinking, 2000);
   //no parentheses here -----^
}

另外，修正这个错字：getElementbyId 应该是 getElementById（JavaScript 区分大小写）。并且经常检查浏览器的错误控制台，你会发现这个的。

解决这两个问题后，它似乎可以工作：http://jsbin.com/ikubaz/1/edit

【讨论】：

传递函数引用是什么意思？就像在眨眼（）中一样？我会在我让它工作后看看我是否保留 setTimeout。
在传递blinking后不要使用括号。否则，您将立即调用该函数并传递其返回值。你想传递函数本身。
哦，太棒了！非常感谢！是否有验证器/调试器来查找这些问题？
我不确定 jslint.com 是否会发现这一点，但值得一试。