快捷導(dǎo)航

javascript實(shí)現(xiàn)自動輸出文本（打字特效）

更新時間：2015年08月27日 08:59:39 投稿：hebedich

文字如何實(shí)現(xiàn)打字的效果呢?在瀏覽網(wǎng)頁的時候也經(jīng)常能看到這種效果。本文給大家匯總介紹了幾種打字效果的文字特效,文字一個一個地打印在頁面上。

主要利用了setTimeout(),遞歸和String.substring();

做出的效果就像是有一個打字員在打字.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
</head>
<body bgcolor="#ccc" onload="printer();">
  <h2 align="center">文本自動輸出</h2>
  <br>
  <br>
  <hr width="400" color="black">
  <br>
 <form align="center">
  <textarea cols="50" rows="30" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" wrap=virtual></textarea>
 </form>
</body>
<script type="text/javascript">

  //獲取textarea對象
  var text=document.getElementById("text");
  //要輸出的內(nèi)容
  var str="  傳統(tǒng)的HTML語言不能開發(fā)交互式的動態(tài)網(wǎng)頁，而JavaScript卻能很好的做到這一點(diǎn)。JavaScript是一門相當(dāng)簡單易學(xué)的網(wǎng)絡(luò)化編程語言，通過把她和HTML語言相互結(jié)合起來，能夠?qū)崿F(xiàn)實(shí)時的動態(tài)網(wǎng)頁特效，這給網(wǎng)頁瀏覽者在瀏覽網(wǎng)頁的同時也提供了某些樂趣。";
  var pos=0;
  //利用遞歸和setTimeout()實(shí)現(xiàn)文字輸出
  function printer(){
    text.value=str.substring(0,pos)+"|";
    //判斷是否到達(dá)結(jié)尾.如果是則一秒后再來一遍.
    if(pos++>str.length){
      pos=0;
      setTimeout("printer()",1000);
    }else{
      setTimeout("printer()",50);
    }
  }
</script>
</html>

方法二：JavaScript實(shí)現(xiàn)打字電腦打字效果

<span id="demo"></span>
<script defer>
var text="JavaScript實(shí)現(xiàn)的打字效果"  //預(yù)定文字
var delay=200             //文字出現(xiàn)的時間間隔
var i=0                //初始化變量 i
function scrollit(){
//設(shè)置 id 為 demo 的對象內(nèi)的文字為從變量 text 的 0 開始到 i 間的文字加"_"
demo.innerText=text.slice(0,i++)+"_"  
if(i>text.length){       //當(dāng) i 大于 text 的文本長度時
  i=0              //重設(shè) i 為 0，使文字重新從第一個文字出現(xiàn)
//延時執(zhí)行scrollit()函數(shù),delay*10是為了讓顯示完整文字的時間長一點(diǎn)
  setTimeout("scrollit()",delay*10) 
}
  //否則在delay毫秒后再次執(zhí)行scrollit()函數(shù)
else setTimeout("scrollit()",delay)       
}
scrollit() //調(diào)用scrollit()函數(shù)
</script>

方法三：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>標(biāo)題頁</title>
 <script language=javascript>
var layers =document.layers;
var style=document.all;
var both=layers||style;
var idme=908601;
if(layers)
{ layerRef='document.layers';styleRef ='';}
if(style)
{ layerRef='document.all';styleRef = '.style';}
//開始參數(shù)的定義
function writeOnText(obj,str)
{
if(layers)with(document[obj])
{ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str'); 
}
var dispStr=new Array("證監(jiān)會稱將嚴(yán)查利用內(nèi)幕信息牟取不當(dāng)利益行為!"); //要出現(xiàn)的文本
var overMe=0;
//逐字顯示的方法
function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
var mystr='',strchar='';
var skip=200;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;}
mystr = str.slice(0,idx);  //返回?cái)?shù)組從開始到指定位置的字符串
strchar = str.charAt(idx++);//當(dāng)前地址的字符
if (overMe==0 && plysnd==1)
{
//針對瀏覽器的不同，調(diào)用不同的顯示方法
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled())
{document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2
+"'>"+strchar+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}}
function init()
{txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}
</script>
<BODY onload=init()>
<DIV class=style1 id=div1></DIV>
</BODY>
</html>

您可能感興趣的文章: