[随便看看]JS打字效果

代码来自

http://fediafedia.com/neo/linux/index.html

js代码：

/*
readDataFrom: 2014/07/04 15:17
reader: WangXinsheng
code from:
http://fediafedia.com/neo/linux/index.html
*/

/*
*(c) Copyright 2011 Simone Masiero. Some Rights Reserved. 
*This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
*/

$(
    function(){
        // read: jquery listener, when keydown run the Object[Typer]'s function[addText or removeText]
        $( document ).keydown(
            function ( event ) {
                if(event.keyCode != 8) Typer.addText( event ); //Capture the keydown event and call the addText, this is executed on page load
                else { Typer.removeText(); event.preventDefault(); }
            }
        );
    }
);
// read: Main Object Typer
var Typer={
    text: null,
    accessCountimer:null,
    index:0, // current cursor position
    speed:2, // speed of the Typer // read: the count of the words when one key has been pressed[keydown]
    file:"", //file, must be setted // read: maybe the artical's URL
    accessCount:0, //times alt is pressed for Access Granted
    deniedCount:0, //times caps is pressed for Access Denied
    secCount:0, //times caps is pressed for Access Denied
        coldCount:0, //times caps is pressed for Access Denied
    secCount:0, //times caps is pressed for Access Denied
    radarCount:0, 
        windowCount:0, 
            ponyCount:0, 
    tagList:[],
    typeIntervalCounter:0,
    typeInterval:false,
    // read: initalize the Typer[like get the file data and save in var text(use Ajax, if run offline......)]
    init: function(){// inizialize Hacker Typer
        accessCountimer=setInterval(function(){Typer.updLstChr();},500); // inizialize timer for blinking cursor
        $.get(Typer.file,function(data){// get the text file
            Typer.text=data;// save the textfile in Typer.text
        });
    },
    // read: return the text what has been print out
    content:function(){
        return $("#console").html();// get console content
    },
    // read: to append the par[str] to the screen
    write:function(str){// append to console content
        $("#console").append(str);
        return false;
    },
    /*
    * read: useless, just to show the effect of hacker result, such as access,deined and so on. start
    */
    makeAccess:function(){//create Access Granted popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.accessCount=0; //reset count
        var ddiv=$("<div id='gran'>").html(""); // create new blank div and id "gran"
        ddiv.addClass("accessGranted"); // add class to the div
        ddiv.html("<h1>ACCESS GRANTED</h1>"); // set content of div
        $(document.body).prepend(ddiv); // prepend div to body
        return false;
    },
    makeDenied:function(){//create Access Denied popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.deniedCount=0; //reset count
        var ddiv=$("<div id='deni'>").html(""); // create new blank div and id "deni"
        ddiv.addClass("accessDenied");// add class to the div
        ddiv.html("<h1>ACCESS DENIED</h1>");// set content of div
        $(document.body).prepend(ddiv);// prepend div to body
        return false;
        },
    makeSecurity:function(){//create Access Denied popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.deniedCount=0; //reset count
        var ddiv=$("<div id='secu'>").html(""); // create new blank div and id "deni"
        ddiv.addClass("securityBreach");// add class to the div
        ddiv.html("<h1>SECURITY BREACH</h1><h2>LEVEL 3 ACCESS REQUIRED</h2>");// set content of div
        $(document.body).prepend(ddiv);// prepend div to body
        return false;
        },
        
    makeColdWar:function(){//create Access Denied popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.deniedCount=0; //reset count
        var ddiv=$("<div id='cold'>").html(""); // create new blank div and id "deni"
        ddiv.addClass("coldwar");// add class to the div
        ddiv.html("<img src='http://i.imgur.com/o5dtIHA.gif'>");// set content of div
        $(document.body).prepend(ddiv);// prepend div to body
        return false;
    },
    makeRadar:function(){//create Access Denied popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.radarCount=0; //reset count
        var ddiv=$("<div id='radar'>").html(""); // create new blank div and id "deni"
        ddiv.addClass("radar");// add class to the div
        ddiv.html("<img src='http://i.imgur.com/id2kyxB.gif'><br />");// set content of div
        $(document.body).prepend(ddiv);// prepend div to body
        return false;
    },
    makePony:function(){//create Access Denied popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.ponyCount=0; //reset count
        var ddiv=$("<div id='pony'>").html(""); // create new blank div and id "deni"
        ddiv.addClass("pony");// add class to the div
        ddiv.html("<img src='http://i.imgur.com/YggdgGU.gif'>");// set content of div
        $(document.body).prepend(ddiv);// prepend div to body
        return false;
    },
    makeWindow:function(){//create Access Denied popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.windowCount=0; //reset count
        var ddiv=$("<div id='window'>").html(""); // create new blank div and id "deni"
        ddiv.addClass("window");// add class to the div
        ddiv.html("<iframe src='http://hackertyper.com/' width='640px' height='480px' ></iframe>");// set content of div
        $(document.body).prepend(ddiv);// prepend div to body
        return false;
    },
    
    hidepop:function(){// remove all existing popups
        $("#deni").remove();
        $("#gran").remove();
        $("#secu").remove();
        $("#cold").remove();
        $("#pony").remove();
        $("#window").remove();
    },
    /*
    * read: useless, just to show the effect of hacker result, such as access,deined and so on. end
    */
    
    removeText:function(){
        if(Typer.text){
            /*
            var usedTags= new RegExp("<img.*?>", "gi");
            //var foundTag = usedTags.exec(Typer.text.substring(Typer.index,-Typer.index));
            //console.log(Typer.text.substring(Typer.index,-Typer.index));
            var foundTags = /<img.*?>/gi.exec(Typer.index,-Typer.index);
            console.log(foundTags)
            while(usedTags.test(Typer.text.substring(Typer.index,-Typer.index))==true) {
                console.log(usedTags.lastIndex,/<img.*?>/gi.exec(Typer.text.substring(usedTags.lastIndex)));
            }
            */
            //if(foundTag instanceof Array && foundTag[0] == Typer.text.substring(Typer.index,-foundTag[0].length)) {
            //    Typer.index -= foundTag[0].length;//console.log(foundTag[0],foundTag)
                //console.log(Typer.text.substring(Typer.index,-foundTag[0].length))
            //}
            //Typer.text.substring(Typer.index),foundTag)
            // read: here is not good, when index = 1, speed = 2 , index will be 1-2*2=-3
            Typer.index = (Typer.index > 0) ? Typer.index - Typer.speed * 2 : 0;
            //console.log(Typer.text.substring(0,Typer.index-(Typer.speed)))
            Typer.addText(event);
        }
    },
    
    addText:function(key){//Main function to add the code
    /*
    * read: useless, just to show the effect of hacker result, such as access,deined and so on. start
    */
        if(key.keyCode==109){// key 18 = alt key
            Typer.accessCount++; //increase counter 
            if(Typer.accessCount>=1){// if it's presed 3 times
                Typer.makeAccess(); // make access popup
            }
        }else if(key.keyCode==107){// key 20 = caps lock
            Typer.deniedCount++; // increase counter
            if(Typer.deniedCount>=1){ // if it's pressed 3 times
                Typer.makeDenied(); // make denied popup
                        }
        }else if(key.keyCode==106){// key 20 = caps lock
            Typer.coldCount++; // increase counter
            if(Typer.coldCount>=1){ // if it's pressed 3 times
                Typer.makeColdWar(); // make denied popup
            }
        }else if(key.keyCode==104){// key 20 = caps lock
            Typer.radarCount++; // increase counter
            if(Typer.radarCount>=1){ // if it's pressed 3 times
                Typer.makeRadar(); // make denied popup
            }
        }else if(key.keyCode==98){// key 20 = caps lock
            Typer.ponyCount++; // increase counter
            if(Typer.ponyCount>=1){ // if it's pressed 3 times
                Typer.makePony(); // make denied popup
            }
        }else if(key.keyCode==96){// key 20 = caps lock
            Typer.windowCount++; // increase counter
            if(Typer.windowCount>=1){ // if it's pressed 3 times
                Typer.makeWindow(); // make denied popup
            }
            
        }else if(key.keyCode==111){// key 20 = caps lock
            Typer.secCount++; // increase counter
            if(Typer.secCount>=1){ // if it's pressed 3 times
                Typer.makeSecurity(); // make denied popup
            }
        }else if(key.keyCode==27){ // key 27 = esc key
            Typer.hidepop(); // hide all popups
        }else if(Typer.text){ // otherway if text is loaded
        
    /*
    * read: useless, just to show the effect of hacker result, such as access,deined and so on. end
    */    
            // read: here is fix for bug, the index will be smaller then 0
            if(Typer.index <= 0) {
                $("#console").html('');
            }
            // read: it is a loop to type the word
            Typer.index = Typer.index % Typer.text.length
            // read: get the word typed to the screen
            var cont=Typer.content(); // get the console content
            // read: hide cursor, i think it is not good.
            if(cont.substring(cont.length-1,cont.length)=="|") // if the last char is the blinking cursor
                $("#console").html($("#console").html().substring(0,cont.length-1)); // remove it before adding the text
            /*
            if(key.keyCode!=8){ // if key is not backspace
                Typer.index+=Typer.speed;    // add to the index the speed
            }else{
                if(Typer.index>0) // else if index is not less than 0 
                    Typer.index-=Typer.speed;//    remove speed for deleting text
            }
            */
            // read: get the text to add append to screen
            var text=Typer.text.substr(Typer.index,Typer.speed)//Typer.index-(Typer.speed));// parse the text for stripping html enities
            // read: that's good, use the regexp to replace the newline tag and tab tag
            var rtn= new RegExp("
", "g"); // newline regex
            //var rts= new RegExp("\s", "g"); // whitespace regex
            var rtt= new RegExp("\t", "g"); // tab regex
            text = text.replace(rtn,"<br/>").replace(rtt,"&nbsp;&nbsp;&nbsp;&nbsp;");//.replace(rts,"&nbsp;");// replace newline chars with br, tabs with 4 space and blanks with an html blank
            //console.log(text);
            // read: append to screen
            $("#console").append(text);
            // here is to dealwith the other tag such as img and {}, and will show it at once
            var usedTags = new RegExp("<img.*?>", "g"),
                systemTags = new RegExp("{(.*?)}", "g");
            var foundTag = usedTags.exec(Typer.text.substring(Typer.index)),
                foundSystemTag = systemTags.exec(Typer.text.substring(Typer.index));
            if(foundTag instanceof Array && foundTag.index <= Typer.speed) {
                Typer.index += foundTag.index + foundTag[0].length;
                $("#console").append(foundTag[0]);
            } else if(foundSystemTag instanceof Array && foundSystemTag.index <= Typer.speed) {
                //Typer.text.replace(/{(.*?)}/,foundSystemTag[1]);
                Typer.index += foundSystemTag.index + foundSystemTag[0].length;
                $("#console").append(foundSystemTag[1]);
            } else Typer.index += Typer.speed;
            // read: scroll to end
            $('body').scrollTop($("#console").height()); 
            // read: scrollDown 50 only, just for save? or for the body topMargin
            window.scrollBy(0,50); // scroll to make sure bottom is always visible 
            
            // scroll to make sure bottom is always visible
            /*
            if(Typer.typeInterval) {
                clearInterval(Typer.typeInterval);
                Typer.typeIntervalCounter = 0;
            }
            Typer.typeInterval = setInterval(function() {
            console.log(Typer.typeIntervalCounter);
            //console.log(Typer.speed);
            var text=Typer.text.substring(0,Typer.index-(Typer.speed-Typer.typeIntervalCounter));// parse the text for stripping html enities
            var rtn= new RegExp("
", "g"); // newline regex
            //var rts= new RegExp("\s", "g"); // whitespace regex
            var rtt= new RegExp("\t", "g"); // tab regex
            text = text.replace(rtn,"<br/>").replace(rtt,"&nbsp;&nbsp;&nbsp;&nbsp;");//.replace(rts,"&nbsp;");// replace newline chars with br, tabs with 4 space and blanks with an html blank
            //console.log(text);
            $("#console").html(text);
            $('body').scrollTop($("#console").height()); // scroll to make sure bottom is always visible
            if(Typer.typeIntervalCounter>Typer.speed) {
                clearInterval(Typer.typeInterval);
                Typer.typeIntervalCounter = 0;
            }
            Typer.typeIntervalCounter++;
            },10);
            */
        }
        /*
        * read: effect, it is useless nomally. start
        */
        if ( key.preventDefault && key.keyCode != 122 ) { // prevent F11(fullscreen) from being blocked
            key.preventDefault()
        };  
        if(key.keyCode != 122){ // otherway prevent keys default behavior
            key.returnValue = false;
        }
        /*
        * read: effect, it is useless nomally. end
        */
    },
    // read: that's interesting, use append and remove to show the cursor, if the last word should be |, it will be wrong!!!!!!!
    updLstChr:function(){ // blinking cursor
        var cont=this.content(); // get console 
        if(cont.substring(cont.length-1,cont.length)=="|") // if last char is the cursor
            $("#console").html($("#console").html().substring(0,cont.length-1)); // remove it
        else
            this.write("|"); // else write it
    }
}
// read: to show the current time
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
// read: add the 0 in front of the minutes and seconds
function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}

// read: to start the application
// we should 
// set the file Url
// and initlize the Typer Object

html调用：

<script type="text/javascript">
Typer.file='kernel.txt';
Typer.init();
</script>

---

另一种js打字效果代码

html+js代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS字幕打字效果</title>
    <style type="text/css">
    body{
    font-family: Arial;
    margin-top:0px;
    background-repeat:no-repeat;
    padding-top:100px;
    }
    #myContent, #myContent blink{
        width:500px;
        height:200px;
        background:black;
        color: #00FF00;
        font-family:courier;
    }    
    blink{
        display:inline;
    }
    </style>
    <script type="text/javascript">    
    var charIndex = -1;
    var stringLength = 0;
    var inputText;
    function writeContent(init){
    if(init){
        inputText = document.getElementById('contentToWrite').innerHTML;
    }
        if(charIndex==-1){
            charIndex = 0;
            stringLength = inputText.length;
        }
        var initString = document.getElementById('myContent').innerHTML;
        initString = initString.replace(/<SPAN.*$/gi,"");
        
        var theChar = inputText.charAt(charIndex);
           var nextFourChars = inputText.substr(charIndex,4);
           if(nextFourChars=='<BR>' || nextFourChars=='<br>'){
               theChar  = '<BR>';
               charIndex+=3;
           }
        initString = initString + theChar + "<SPAN id='blink'>|</SPAN>";
        document.getElementById('myContent').innerHTML = initString;
        charIndex = charIndex/1 +1;
if(charIndex%2==1){
             document.getElementById('blink').style.display='none';
        }else{
             document.getElementById('blink').style.display='inline';
        }
                
        if(charIndex<=stringLength){
            setTimeout('writeContent(false)',150);
        }else{
            blinkSpan();
        }  
    }
    var currentStyle = 'inline';
    function blinkSpan(){
        if(currentStyle=='inline'){
        currentStyle='none';
        }else{
        currentStyle='inline';
        }
        document.getElementById('blink').style.display = currentStyle;
        setTimeout('blinkSpan()',500);
    }
    </script>
</head>
<body>
<div id="myContent">
</div>
<div id="contentToWrite" style="display:none">
Login : username<br>
password : ******<br>
Access is granted<br>
</div>
<script type="text/javascript">
writeContent(true);
</script>

</body>
</html>

有空再做成JQuery插件