Adding content using Javascript before other content_问答_开发者

Adding content using Javascript before other content

开发者 https://www.devze.com 2023-03-14 01:52 出处：网络

So I\'m trying to make a 开发者_JS百科little \"Matrix\" themed program, I want the user to input their name, and then the program will run through 20 numbers every second as it displays each character

So I'm trying to make a 开发者_JS百科little "Matrix" themed program, I want the user to input their name, and then the program will run through 20 numbers every second as it displays each character of their name every 1 second, from left to right. What am I doing wrong? All that's working so far is the number scrolling

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

The setInterval is the loop, you don't need additional for loop. Also, you should set variable to store return value from set interval so you can clear it later when you want it to stop running.

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

}

Fiddle (demo) here: http://jsfiddle.net/jW8hZ/

you need to iterate through all the letters inside the 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);

}