Tweet

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. Here is a complete HTML file with the JavaScript terminal.