Как сделать мигающую анимацию в Javascript?

Я пытаюсь сделать несколько миганий ascii, чередуя «0» и «_» для глаз. Я вставил код, который у меня есть внизу. Человек ascii просто закрывается, а затем открывает глаза каждые несколько секунд. Я не понимаю, почему мой код не работает, и я открыт для использования других способов. Благодаря!Как сделать мигающую анимацию в Javascript?

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

источник

2013-06-18 Ahris

Вы можете разместить HTML, который идет с этим? –

Вы проходя undefined к setInterval (потому что это возвращаемое значение blinking). Передайте ссылку на функцию вместо:

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

Кроме того, исправить эту опечатку: getElementbyId должен быть getElementById (JavaScript чувствителен к регистру). И всегда проверяйте консоль ошибок вашего браузера, вы поймали бы это.

После устранения обе проблемы, это, кажется, работает: http://jsbin.com/ikubaz/1/edit

источник

2013-06-18 22:46:12 bfavaretto

Что значит передать ссылку на функцию? Как в проходе в мигании()? И я посмотрю, смогу ли я сохранить setTimeout или нет после того, как я его заработаю. – Ahris

Не используйте круглые скобки после «мигания» при передаче. В противном случае вы немедленно вызываете функцию и передаете ее возвращаемое значение. Вы хотите передать эту функцию. – bfavaretto

О, потрясающе! Большое спасибо! Есть ли валидатор/отладчик, чтобы найти эти проблемы? – Ahris

Как сделать мигающую анимацию в Javascript?

ответ

Смежные вопросы