现在的位置: 首页 > 综合 > 正文

JS实现打字机式字符输出效果

2017年12月19日 ⁄ 综合 ⁄ 共 2027字 ⁄ 字号 评论关闭
  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
  4. <title>JS打字机风格的字符输出特效</title> 
  5. <SCRIPT language="JavaScript"> 
  6. <!-- 
  7.  var layers = document.layers, style = document.all, both = layers || style, idme=908601
  8.  if (layers) { layerRef = 'document.layers'styleRef = ''; } if (style) { layerRef = 'document.all'styleRef = '.style'; } 
  9.  function writeOnText(obj, str) { 
  10.    if (layers) with (document[obj]) { document.open();  document.write(str); document.close(); } 
  11.    if (style) eval(obj+'.innerHTMLstr'); 
  12.  } 
  13.  //以下是输出的内容,自己修改即可。 
  14.  var dispStr = new Array( 
  15.  "<font color=red size=3>欢迎来到源码爱好者...</font><br><font color=green size=3>她为我们提供各类编程源码、素材、书籍教程、设计模板、网页特效代码以及常用软件下载。</font><br><font color=blue size=3>是一个有质量的学习型源码下载站。</font>
  16.  ); 
  17.  var overMe=0
  18.  function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) { 
  19.    var tmp0 = tmp1 = '', skip = 0
  20.      if (both && idx <= str.length) { 
  21.   if (str.charAt(idx) == '<') { while (str.charAt(idx) != '>') idx++; idx++; } 
  22.   if (str.charAt(idx) == '&' && str.charAt(idx+1) != ' ') { while (str.charAt(idx) != ';') idx++; idx++; } 
  23.   tmp0 = str.slice(0,idx); 
  24.   tmp1 = str.charAt(idx++); 
  25.   if (overMe==0 && plysnd==1) { 
  26.     if (navigator.plugins[0]) { 
  27.       if (navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()) { 
  28.    document.embeds[0].stop(); 
  29.    setTimeout("document.embeds[0].play(false)",100); } 
  30.     } else if (document.all) { 
  31.    ding.Stop(); 
  32.    setTimeout("ding.Run()",100); 
  33.     } 
  34.     overMe=1
  35.   } else overMe=0
  36.  
  37.   writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>"); 
  38.   setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay); 
  39.    } 
  40.  } 
  41.  
  42.  function init() { 
  43.   txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 50, 0); 
  44.  } 
  45.  // --> 
  46. </SCRIPT> 
  47. </head> 
  48. <body bgcolor="#fef4d9" onload="init()"> 
  49. <DIV class=ttl1 id=ttl0><SPAN class=ttl1></SPAN></DIV> 
  50. </body> 
  51. </html> 

 

抱歉!评论已关闭.