代码来自
http://fediafedia.com/neo/linux/index.html
js代码：
1 /* 2 readDataFrom: 2014/07/04 15:17 3 reader: WangXinsheng 4 code from: 5 http://fediafedia.com/neo/linux/index.html 6 */ 7 8 /* 9 *(c) Copyright 2011 Simone Masiero. Some Rights Reserved. 10 *This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License 11 */ 12 13 $( 14 function(){ 15 // read: jquery listener, when keydown run the Object[Typer]'s function[addText or removeText] 16 $( document ).keydown( 17 function ( event ) { 18 if(event.keyCode != 8) Typer.addText( event ); //Capture the keydown event and call the addText, this is executed on page load 19 else { Typer.removeText(); event.preventDefault(); } 20 } 21 ); 22 } 23 ); 24 // read: Main Object Typer 25 var Typer={ 26 text: null, 27 accessCountimer:null, 28 index:0, // current cursor position 29 speed:2, // speed of the Typer // read: the count of the words when one key has been pressed[keydown] 30 file:"", //file, must be setted // read: maybe the artical's URL 31 accessCount:0, //times alt is pressed for Access Granted 32 deniedCount:0, //times caps is pressed for Access Denied 33 secCount:0, //times caps is pressed for Access Denied 34 coldCount:0, //times caps is pressed for Access Denied 35 secCount:0, //times caps is pressed for Access Denied 36 radarCount:0, 37 windowCount:0, 38 ponyCount:0, 39 tagList:[], 40 typeIntervalCounter:0, 41 typeInterval:false, 42 // read: initalize the Typer[like get the file data and save in var text(use Ajax, if run offline......)] 43 init: function(){// inizialize Hacker Typer 44 accessCountimer=setInterval(function(){Typer.updLstChr();},500); // inizialize timer for blinking cursor 45 $.get(Typer.file,function(data){// get the text file 46 Typer.text=data;// save the textfile in Typer.text 47 }); 48 }, 49 // read: return the text what has been print out 50 content:function(){ 51 return $("#console").html();// get console content 52 }, 53 // read: to append the par[str] to the screen 54 write:function(str){// append to console content 55 $("#console").append(str); 56 return false; 57 }, 58 /* 59 * read: useless, just to show the effect of hacker result, such as access,deined and so on. start 60 */ 61 makeAccess:function(){//create Access Granted popUp FIXME: popup is on top of the page and doesn't show is the page is scrolled 62 Typer.hidepop(); // hide all popups 63 Typer.accessCount=0; //reset count 64 var ddiv=$("<div id='gran'>").html(""); // create new blank div and id "gran" 65 ddiv.addClass("accessGranted"); // add class to the div 66 ddiv.html("<h1>ACCESS GRANTED</h1>"); // set content of div 67 $(document.body).prepend(ddiv); // prepend div to body 68 return false; 69 }, 70 makeDenied:function(){//create Access Denied popUp FIXME: popup is on top of the page and doesn't show is the page is scrolled 71 Typer.hidepop(); // hide all popups 72 Typer.deniedCount=0; //reset count 73 var ddiv=$("<div id='deni'>").html(""); // create new blank div and id "deni" 74 ddiv.addClass("accessDenied");// add class to the div 75 ddiv.html("<h1>ACCESS DENIED</h1>");// set content of div 76 $(document.body).prepend(ddiv);// prepend div to body 77 return false; 78 }, 79 makeSecurity:function(){//create Access Denied popUp FIXME: popup is on top of the page and doesn't show is the page is scrolled 80 Typer.hidepop(); // hide all popups 81 Typer.deniedCount=0; //reset count 82 var ddiv=$("<div id='secu'>").html(""); // create new blank div and id "deni" 83 ddiv.addClass("securityBreach");// add class to the div 84 ddiv.html("<h1>SECURITY BREACH</h1><h2>LEVEL 3 ACCESS REQUIRED</h2>");// set content of div 85 $(document.body).prepend(ddiv);// prepend div to body 86 return false; 87 }, 88 89 makeColdWar:function(){//create Access Denied popUp FIXME: popup is on top of the page and doesn't show is the page is scrolled 90 Typer.hidepop(); // hide all popups 91 Typer.deniedCount=0; //reset count 92 var ddiv=$("<div id='cold'>").html(""); // create new blank div and id "deni" 93 ddiv.addClass("coldwar");// add class to the div 94 ddiv.html("<img src='http://i.imgur.com/o5dtIHA.gif'>");// set content of div 95 $(document.body).prepend(ddiv);// prepend div to body 96 return false; 97 }, 98 makeRadar:function(){//create Access Denied popUp FIXME: popup is on top of the page and doesn't show is the page is scrolled 99 Typer.hidepop(); // hide all popups 100 Typer.radarCount=0; //reset count 101 var ddiv=$("<div id='radar'>").html(""); // create new blank div and id "deni" 102 ddiv.addClass("radar");// add class to the div 103 ddiv.html("<img src='http://i.imgur.com/id2kyxB.gif'><br />");// set content of div 104 $(document.body).prepend(ddiv);// prepend div to body 105 return false; 106 }, 107 makePony:function(){//create Access Denied popUp FIXME: popup is on top of the page and doesn't show is the page is scrolled 108 Typer.hidepop(); // hide all popups 109 Typer.ponyCount=0; //reset count 110 var ddiv=$("<div id='pony'>").html(""); // create new blank div and id "deni" 111 ddiv.addClass("pony");// add class to the div 112 ddiv.html("<img src='http://i.imgur.com/YggdgGU.gif'>");// set content of div 113 $(document.body).prepend(ddiv);// prepend div to body 114 return false; 115 }, 116 makeWindow:function(){//create Access Denied popUp FIXME: popup is on top of the page and doesn't show is the page is scrolled 117 Typer.hidepop(); // hide all popups 118 Typer.windowCount=0; //reset count 119 var ddiv=$("<div id='window'>").html(""); // create new blank div and id "deni" 120 ddiv.addClass("window");// add class to the div 121 ddiv.html("<iframe src='http://hackertyper.com/' width='640px' height='480px' ></iframe>");// set content of div 122 $(document.body).prepend(ddiv);// prepend div to body 123 return false; 124 }, 125 126 hidepop:function(){// remove all existing popups 127 $("#deni").remove(); 128 $("#gran").remove(); 129 $("#secu").remove(); 130 $("#cold").remove(); 131 $("#pony").remove(); 132 $("#window").remove(); 133 }, 134 /* 135 * read: useless, just to show the effect of hacker result, such as access,deined and so on. end 136 */ 137 138 removeText:function(){ 139 if(Typer.text){ 140 /* 141 var usedTags= new RegExp("<img.*?>", "gi"); 142 //var foundTag = usedTags.exec(Typer.text.substring(Typer.index,-Typer.index)); 143 //console.log(Typer.text.substring(Typer.index,-Typer.index)); 144 var foundTags = /<img.*?>/gi.exec(Typer.index,-Typer.index); 145 console.log(foundTags) 146 while(usedTags.test(Typer.text.substring(Typer.index,-Typer.index))==true) { 147 console.log(usedTags.lastIndex,/<img.*?>/gi.exec(Typer.text.substring(usedTags.lastIndex))); 148 } 149 */ 150 //if(foundTag instanceof Array && foundTag[0] == Typer.text.substring(Typer.index,-foundTag[0].length)) { 151 // Typer.index -= foundTag[0].length;//console.log(foundTag[0],foundTag) 152 //console.log(Typer.text.substring(Typer.index,-foundTag[0].length)) 153 //} 154 //Typer.text.substring(Typer.index),foundTag) 155 // read: here is not good, when index = 1, speed = 2 , index will be 1-2*2=-3 156 Typer.index = (Typer.index > 0) ? Typer.index - Typer.speed * 2 : 0; 157 //console.log(Typer.text.substring(0,Typer.index-(Typer.speed))) 158 Typer.addText(event); 159 } 160 }, 161 162 addText:function(key){//Main function to add the code 163 /* 164 * read: useless, just to show the effect of hacker result, such as access,deined and so on. start 165 */ 166 if(key.keyCode==109){// key 18 = alt key 167 Typer.accessCount++; //increase counter 168 if(Typer.accessCount>=1){// if it's presed 3 times 169 Typer.makeAccess(); // make access popup 170 } 171 }else if(key.keyCode==107){// key 20 = caps lock 172 Typer.deniedCount++; // increase counter 173 if(Typer.deniedCount>=1){ // if it's pressed 3 times 174 Typer.makeDenied(); // make denied popup 175 } 176 }else if(key.keyCode==106){// key 20 = caps lock 177 Typer.coldCount++; // increase counter 178 if(Typer.coldCount>=1){ // if it's pressed 3 times 179 Typer.makeColdWar(); // make denied popup 180 } 181 }else if(key.keyCode==104){// key 20 = caps lock 182 Typer.radarCount++; // increase counter 183 if(Typer.radarCount>=1){ // if it's pressed 3 times 184 Typer.makeRadar(); // make denied popup 185 } 186 }else if(key.keyCode==98){// key 20 = caps lock 187 Typer.ponyCount++; // increase counter 188 if(Typer.ponyCount>=1){ // if it's pressed 3 times 189 Typer.makePony(); // make denied popup 190 } 191 }else if(key.keyCode==96){// key 20 = caps lock 192 Typer.windowCount++; // increase counter 193 if(Typer.windowCount>=1){ // if it's pressed 3 times 194 Typer.makeWindow(); // make denied popup 195 } 196 197 }else if(key.keyCode==111){// key 20 = caps lock 198 Typer.secCount++; // increase counter 199 if(Typer.secCount>=1){ // if it's pressed 3 times 200 Typer.makeSecurity(); // make denied popup 201 } 202 }else if(key.keyCode==27){ // key 27 = esc key 203 Typer.hidepop(); // hide all popups 204 }else if(Typer.text){ // otherway if text is loaded 205 206 /* 207 * read: useless, just to show the effect of hacker result, such as access,deined and so on. end 208 */ 209 // read: here is fix for bug, the index will be smaller then 0 210 if(Typer.index <= 0) { 211 $("#console").html(''); 212 } 213 // read: it is a loop to type the word 214 Typer.index = Typer.index % Typer.text.length 215 // read: get the word typed to the screen 216 var cont=Typer.content(); // get the console content 217 // read: hide cursor, i think it is not good. 218 if(cont.substring(cont.length-1,cont.length)=="|") // if the last char is the blinking cursor 219 $("#console").html($("#console").html().substring(0,cont.length-1)); // remove it before adding the text 220 /* 221 if(key.keyCode!=8){ // if key is not backspace 222 Typer.index+=Typer.speed; // add to the index the speed 223 }else{ 224 if(Typer.index>0) // else if index is not less than 0 225 Typer.index-=Typer.speed;// remove speed for deleting text 226 } 227 */ 228 // read: get the text to add append to screen 229 var text=Typer.text.substr(Typer.index,Typer.speed)//Typer.index-(Typer.speed));// parse the text for stripping html enities 230 // read: that's good, use the regexp to replace the newline tag and tab tag 231 var rtn= new RegExp(" ", "g"); // newline regex 232 //var rts= new RegExp("\s", "g"); // whitespace regex 233 var rtt= new RegExp("\t", "g"); // tab regex 234 text = text.replace(rtn,"<br/>").replace(rtt," ");//.replace(rts," ");// replace newline chars with br, tabs with 4 space and blanks with an html blank 235 //console.log(text); 236 // read: append to screen 237 $("#console").append(text); 238 // here is to dealwith the other tag such as img and {}, and will show it at once 239 var usedTags = new RegExp("<img.*?>", "g"), 240 systemTags = new RegExp("{(.*?)}", "g"); 241 var foundTag = usedTags.exec(Typer.text.substring(Typer.index)), 242 foundSystemTag = systemTags.exec(Typer.text.substring(Typer.index)); 243 if(foundTag instanceof Array && foundTag.index <= Typer.speed) { 244 Typer.index += foundTag.index + foundTag[0].length; 245 $("#console").append(foundTag[0]); 246 } else if(foundSystemTag instanceof Array && foundSystemTag.index <= Typer.speed) { 247 //Typer.text.replace(/{(.*?)}/,foundSystemTag[1]); 248 Typer.index += foundSystemTag.index + foundSystemTag[0].length; 249 $("#console").append(foundSystemTag[1]); 250 } else Typer.index += Typer.speed; 251 // read: scroll to end 252 $('body').scrollTop($("#console").height()); 253 // read: scrollDown 50 only, just for save? or for the body topMargin 254 window.scrollBy(0,50); // scroll to make sure bottom is always visible 255 256 // scroll to make sure bottom is always visible 257 /* 258 if(Typer.typeInterval) { 259 clearInterval(Typer.typeInterval); 260 Typer.typeIntervalCounter = 0; 261 } 262 Typer.typeInterval = setInterval(function() { 263 console.log(Typer.typeIntervalCounter); 264 //console.log(Typer.speed); 265 var text=Typer.text.substring(0,Typer.index-(Typer.speed-Typer.typeIntervalCounter));// parse the text for stripping html enities 266 var rtn= new RegExp(" ", "g"); // newline regex 267 //var rts= new RegExp("\s", "g"); // whitespace regex 268 var rtt= new RegExp("\t", "g"); // tab regex 269 text = text.replace(rtn,"<br/>").replace(rtt," ");//.replace(rts," ");// replace newline chars with br, tabs with 4 space and blanks with an html blank 270 //console.log(text); 271 $("#console").html(text); 272 $('body').scrollTop($("#console").height()); // scroll to make sure bottom is always visible 273 if(Typer.typeIntervalCounter>Typer.speed) { 274 clearInterval(Typer.typeInterval); 275 Typer.typeIntervalCounter = 0; 276 } 277 Typer.typeIntervalCounter++; 278 },10); 279 */ 280 } 281 /* 282 * read: effect, it is useless nomally. start 283 */ 284 if ( key.preventDefault && key.keyCode != 122 ) { // prevent F11(fullscreen) from being blocked 285 key.preventDefault() 286 }; 287 if(key.keyCode != 122){ // otherway prevent keys default behavior 288 key.returnValue = false; 289 } 290 /* 291 * read: effect, it is useless nomally. end 292 */ 293 }, 294 // read: that's interesting, use append and remove to show the cursor, if the last word should be |, it will be wrong!!!!!!! 295 updLstChr:function(){ // blinking cursor 296 var cont=this.content(); // get console 297 if(cont.substring(cont.length-1,cont.length)=="|") // if last char is the cursor 298 $("#console").html($("#console").html().substring(0,cont.length-1)); // remove it 299 else 300 this.write("|"); // else write it 301 } 302 } 303 // read: to show the current time 304 function startTime() 305 { 306 var today=new Date(); 307 var h=today.getHours(); 308 var m=today.getMinutes(); 309 var s=today.getSeconds(); 310 // add a zero in front of numbers<10 311 m=checkTime(m); 312 s=checkTime(s); 313 document.getElementById('txt').innerHTML=h+":"+m+":"+s; 314 t=setTimeout(function(){startTime()},500); 315 } 316 // read: add the 0 in front of the minutes and seconds 317 function checkTime(i) 318 { 319 if (i<10) 320 { 321 i="0" + i; 322 } 323 return i; 324 } 325 326 // read: to start the application 327 // we should 328 // set the file Url 329 // and initlize the Typer Object
html调用：
1 <script type="text/javascript"> 2 Typer.file='kernel.txt'; 3 Typer.init(); 4 </script>
---
另一种js打字效果代码
html+js代码
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>JS字幕打字效果</title> 5 <style type="text/css"> 6 body{ 7 font-family: Arial; 8 margin-top:0px; 9 background-repeat:no-repeat; 10 padding-top:100px; 11 } 12 #myContent, #myContent blink{ 13 width:500px; 14 height:200px; 15 background:black; 16 color: #00FF00; 17 font-family:courier; 18 } 19 blink{ 20 display:inline; 21 } 22 </style> 23 <script type="text/javascript"> 24 var charIndex = -1; 25 var stringLength = 0; 26 var inputText; 27 function writeContent(init){ 28 if(init){ 29 inputText = document.getElementById('contentToWrite').innerHTML; 30 } 31 if(charIndex==-1){ 32 charIndex = 0; 33 stringLength = inputText.length; 34 } 35 var initString = document.getElementById('myContent').innerHTML; 36 initString = initString.replace(/<SPAN.*$/gi,""); 37 38 var theChar = inputText.charAt(charIndex); 39 var nextFourChars = inputText.substr(charIndex,4); 40 if(nextFourChars=='<BR>' || nextFourChars=='<br>'){ 41 theChar = '<BR>'; 42 charIndex+=3; 43 } 44 initString = initString + theChar + "<SPAN id='blink'>|</SPAN>"; 45 document.getElementById('myContent').innerHTML = initString; 46 charIndex = charIndex/1 +1; 47 if(charIndex%2==1){ 48 document.getElementById('blink').style.display='none'; 49 }else{ 50 document.getElementById('blink').style.display='inline'; 51 } 52 53 if(charIndex<=stringLength){ 54 setTimeout('writeContent(false)',150); 55 }else{ 56 blinkSpan(); 57 } 58 } 59 var currentStyle = 'inline'; 60 function blinkSpan(){ 61 if(currentStyle=='inline'){ 62 currentStyle='none'; 63 }else{ 64 currentStyle='inline'; 65 } 66 document.getElementById('blink').style.display = currentStyle; 67 setTimeout('blinkSpan()',500); 68 } 69 </script> 70 </head> 71 <body> 72 <div id="myContent"> 73 </div> 74 <div id="contentToWrite" style="display:none"> 75 Login : username<br> 76 password : ******<br> 77 Access is granted<br> 78 </div> 79 <script type="text/javascript"> 80 writeContent(true); 81 </script> 82 83 </body> 84 </html>
有空再做成JQuery插件