Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote -2 down vote favorite

I was trying to make this text change matrix movie like effect in JavaScript.The basic concept was that there is a div present in html and JavaScript take that div's inner text and manipulate it to create the continuously changing random text effect like in matrix movie. I am quite new to JavaScript, I am having hard time figuring out the logic behind the animation like the each steps, one step after another like what will happen next in whole animation process.

Anyways, I tried to make it on my own but as you can suspect i failed.

Here is my code :

<html>
<head>
<script>

    var text = document.getElementById("text").innerText;
    var length_var = text.length;
    var possible = [];
    var possible_text ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    var counter = 0;
    var arr_text = [];

    var new_func = function(){
        arr_text[Math.floor(Math.random() * length_var)] = possible.charAt(Math.floor(Math.random() * possible.length));
        alert(arr_text);

    };

    var call_func = function(){

        for(var i=0; i<=possible_text.length; i++){
            possible[i] = possible_text.charAt(i);
        }

        for(var i=0; i<= length_var ; i++){
            arr_text[i] = text.charAt(i);
        }

        setInterval(new_func, 100);

    };

</script>
</head>
<body onload="call_func()">

<div id="text">
    Hello There!
</div>
</body>
</html>

What I was planning to do can be seen on this page, as I was highly motivated to do this effect on my own.

Link : https://events.ccc.de/congress/2012/wiki/Main_Page

The header text of the page contains such animation.

Please Help

share|improve this question

closed as off topic by codesparkle♦ Mar 31 at 11:35

Questions on Code Review Stack Exchange are expected to relate to code review request within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

1 Answer

up vote 0 down vote

Try this. It changes the string sequentially. 

function main() {
    "use strict";
    var counter = 0, all ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    var $_inter = setInterval(function() {
        var text = document.getElementById("text");
        text.innerHTML = text.innerHTML.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.innerHTML.substring(counter+1);
        counter = (counter+1)%text.innerHTML.length;
    }, 100);
}
window.addEventListener('load', main, false);
share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.