getButterfly Logo getButterfly

Today’s tutorial is about creating a terminal screen together with lime terminal characters in JavaScript.

Let’s start with the CSS:

<style type="text/css">
textarea {
    background-color: #000000;
    color: #14FC03;
    border: 1px solid #111;
}
</style>

OK, the JavaScript is next:

<script type="text/javascript">
<!--
var tl=new Array(
    "Initializing script",
    "Activating engine",
    "Running queries...",
    "Throwing errors...",
    "Catching errors",
    "",
    "END OF SCRIPT"
);
var speed=60;
var index=0;
var text_pos=0;
var str_length=tl[0].length;
var contents, row;
function type_text() {
    contents='';
    row=Math.max(0,index-7);
    while(row<index)
        contents += tl[row++] + '\r\n';
    document.forms[0].elements[0].value = contents + tl[index].substring(0,text_pos) + "_";
    if(text_pos++==str_length) {
        text_pos=0;
        index++;
        if(index!=tl.length) {
            str_length=tl[index].length;
            setTimeout("type_text()",1500);
        }
    }
    else
        setTimeout("type_text()",speed);
}
// -->
</script>

And, finally, the HTML:

<form>
    <div align="center">
        <textarea rows="10" cols="80" wrap="soft"></textarea>
    </div>
</form>

Actually, the <form> element is not required, it’s there just for validation.


Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.



If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a Reply

Your email address will not be published. Required fields are marked *