Добавление контента с использованием Javascript перед другим контентом - PullRequest
Новая
       9

Добавление контента с использованием Javascript перед другим контентом

0 голосов
/ 19 июня 2011

Итак, я пытаюсь создать небольшую тематическую программу «Матрица», я хочу, чтобы пользователь вводил свое имя, а затем программа будет проходить через 20 чисел каждую секунду, поскольку она отображает каждый символ их имени каждую 1 секунду, слева направо. Что я делаю неправильно? Пока работает только прокрутка номера 

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

Ответы [ 2 ]

2 голосов
/ 19 июня 2011

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

}

Fiddle (demo) здесь: http://jsfiddle.net/jW8hZ/

0 голосов
/ 19 июня 2011

вам нужно перебрать все буквы внутри 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);

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...