在其他內容之前使用Javascript添加內容

所以我想製作一個「矩陣」主題程序，我希望用戶輸入他們的名字，然後程序每秒鐘運行20個數字，因爲它顯示每個字符他們的名字每1秒，從左到右。我究竟做錯了什麼？到目前爲止，所有工作都是滾動的數字在其他內容之前使用Javascript添加內容

<html> 
<head> 
    <script type="text/javascript"> 
    var name = prompt("Enter Your Name to be 'MatrixIzed!':", ""); 

    function numberScroll(){ 
     for (i=0;i<name.length;i++){ 

      setInterval(function() { 
        var n = Math.floor(Math.random() * 9); 
        document.getElementById('txt2').innerHTML = n; 
       }, 50); 

      setInterval(function() { 
        document.getElementById('txt1').innerHTML = name.charAt(i); 
       },1000); 
     } 
    } 
    </script> 
</head> 
<body onLoad="numberScroll()"> 
    <div style="float:left" id="txt1"></div> 
    <div id="txt2"></div> 
</body> 
</html>

來源

2011-06-18 bruchowski

setInterval是循環，你不需要額外的循環。此外，你應該設置變量來存儲設置的時間間隔的返回值，以便以後可以在需要停止運行時清除它。

function numberScroll(){ 

    // no need to loop i, just set it and increment it in the interval 
    var i = 0; 

    // store interval as variable, so you can stop it later 
    var numbers = setInterval(function(){ 
     var n = Math.floor(Math.random() * 9); 
     document.getElementById('txt2').innerHTML = n; 
    }, 50); 

    var letters = setInterval(function(){ 
     // `+=` rather than `=` to incrementally add to the div's inner html 
     // use and increment i in one step with `i++` 
     document.getElementById('txt1').innerHTML += name.charAt(i++); 
     // when it has reached the end of the name, clear the intervals and empty the second div 
     if(i >= name.length){ 
      clearInterval(numbers); 
      clearInterval(letters); 
      document.getElementById('txt2').innerHTML = ''; 
     } 
    },500); 

}

小提琴（演示）在這裏：http://jsfiddle.net/jW8hZ/

來源

2011-06-18 20:43:36

太感謝你了:)我拉我的頭髮！ – bruchowski

不用擔心，我可能有時候會使用這個:) –

您需要遍歷setInterval中的所有字母。

function numberScroll(){ 
    setInterval(function() { 
    var n = Math.floor(Math.random() * 9); 
    document.getElementById('txt2').innerHTML = n;} 
    , 50); 


    var i=0; 
    setInterval(function() { 
    document.getElementById('txt1').innerHTML = name.charAt(i); 
    i = (i+1)%name.lenghth; 
    } 
    ,1000); 

}

來源

2011-06-18 20:41:23 Gerben

在其他內容之前使用Javascript添加內容

回答

相關問題