JavaScript字符串逐个输出效果

2018-1-3 15:21| 发布者: antzone| 查看: 476| 评论: 0|来自: 蚂蚁部落

使用键盘打字的时候,字符会屏幕上逐个输出,下面通过实例代码介绍一下如何利用JavaScript实现字符串中的字符逐个输出效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script type="text/javascript"> 
function Reader(content,cID,stopID,continueID){ 
  this.conLoad=document.getElementById(cID); 
  this.stopBtn=document.getElementById(stopID); 
  this.continueBtn=document.getElementById(continueID); 
  this.content=content; 
  this.index=0; 
  var t=this; 
  this.stopBtn.onclick=(function(){ 
    return function(){ 
      t.stopReader(t); 
    }; 
  })(t);
   
  this.continueBtn.onclick=(function(){ 
    return function(){ 
      t.continueReader(t); 
    }; 
  })(t); 
} 
 
Reader.prototype={ 
  startReader:function(){ 
    var t = this; 
    t.toId=setInterval(function(){ 
      if(t.content[t.index]){ 
        t.conLoad.innerHTML+=t.content[t.index]; 
      } 
      t.index++; 
      if(t.content.length==t.index){ 
        clearInterval(t.toId); 
        t.conLoad.innerHTML; 
      } 
    }, 200); 
  }, 
  stopReader:function(t){ 
    t.flag=true; 
    clearInterval(t.toId); 
  }, 
  continueReader:function(t){ 
    if(t.flag){
      t.startReader(); 
    } 
    t.flag=false; 
  } 
}; 
var content="蚂蚁部落欢迎您,只有努力奋斗才会有美好的明天。"; 
window.onload=function(){ 
  new Reader(content,"content","btnStop","btnContinue").startReader(); 
}; 
</script> 
<body> 
<div id='content'></div> 
<div id='operate'>
  <input type="button" id='btnStop' value="暂停"/>
  <input type="button" id='btnContinue' value="继续"/>
</div> 
</body> 
</html>

代码实现了我们的要求,能够实现字符串文字逐个输出效果,下面详细介绍一下它的实现过程。

一.代码注释:

(1).function Reader(content,cID,stopID,continueID){},声明一个函数,被用作构造函数,content是要逐个输出字符的字符串,cID是要显示字符串的元素的id属性值,stopID是暂停按钮的id属性值,continueID是继续按钮的id属性值。

(2).this.conLoad=document.getElementById(cID),获取显示字符串的元素对象。

(3).this.stopBtn=document.getElementById(stopID),获取停止按钮对象。

(4).this.continueBtn=document.getElementById(continueID),获取继续按钮对象。

(5).this.content=content,将字符串赋值给变量content。

(6).this.index=0,将index属性的初始值设置为0,index将用作字符串中字符的索引。

(7).var t=this,将对象的引用赋值给t,这一点很重要,否则当点击按钮触发事件执行事件处理函数的时候,就会出现找不到stopReader()和continueReader()函数的错误,因为如果是this.stopReader()或者this.continueReader()的话,this是指向按钮对象的,而这两个函数都是属于new Reader()对象的。

(8).this.stopBtn.onclick=(function(){      

    return function(){        

   t.stopReader(t);      

};    

  })(t); 

注册事件处理函数,这里是利用匿名函数返回一个函数对象的方式。

(9).this.continueBtn.onclick=(function(){      

    return function(){        

   t.continueReader(t);      

};   

})(t); 

和上面是同样的道理,就不用再多说了。

(10).Reader.prototype={},这里是重写了原型对象,尽可能的修改而不是重写原型。

(11).startReader:function(){),此函数可以用来挨个输出字符。

(12).var t = this,将对象的引用赋值给变量t,道理其实和上面介绍的一样。

(13).t.toId=setInterval(function(){},200),利用定时器函数每隔200毫秒输出一个字符。

(14).if(t.content[t.index]){t.conLoad.innerHTML+=t.content[t.index]},如果当前索引位置存在字符,则将元素中的内容累加,这样就出现了打字机效果。

(15).t.index++,索引加1。

(16).if(t.content.length==t.index){

  clearInterval(t.toId); 

  t.conLoad.innerHTML;

}

如果index值等于字符串的长度,那么就停止定时器函数的执行,也就是字符串已经输出完毕。

(17).stopReader:function(t){ 

    t.flag=true; 

    clearInterval(t.toId); 

  }

暂停按钮的事件处理函数。

(18).continueReader:function(t){ 

    if(t.flag){

      t.startReader(); 

    } 

    t.flag=false; 

继续按钮的事件处理函数。

二.相关阅读:

(1).this参阅javascript this一章节。

(2).构造函数参阅javascript构造函数简一章节。 

(3).对象原型参阅javascript prototype原型一章节。 

(4).setInterval()参阅setInterval()一章节。 

(5).clearInterval()参阅window.clearInterval()一章节。 


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部