你如何在Javascript中制作一个闪烁的动画?

时间:2013-06-18 22:37:57

标签: javascript ascii-art blink

我试图通过在“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>

1 个答案:

答案 0 :(得分:2)

您将undefined传递给setInterval(因为这是blinking的返回值)。改为传递函数引用:

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

此外,修复此错误:getElementbyId应为getElementById(JavaScript区分大小写)。并且总是检查浏览器的错误控制台,你会发现这个。

解决这两个问题后,它似乎有效:http://jsbin.com/ikubaz/1/edit