Javascript에서 어떻게 깜박이는 애니메이션을 만드나요?

눈을 "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을 게시 할 수 있습니다 : 당신이 두 문제를 해결 한 후

, 그것은 일을 나타 납니까? –

당신은 setInterval-undefined을 전달하는 (즉, 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

'blinking' 후 괄호를 사용하지 마십시오. 그렇지 않으면 함수를 즉시 호출하고 반환 값을 전달합니다. 함수 자체를 전달하려고합니다. – bfavaretto

아, 굉장해! 고마워요! 이러한 문제를 확인하는 데 필요한 유효성 검사기/디버거가 있습니까? – Ahris

Javascript에서 어떻게 깜박이는 애니메이션을 만드나요?

답변

관련 문제