JavaScript 打字機效果詳解

admin發表於2018-11-20
JavaScript

通過JavaScript可以實現一個字串總的字元逐個顯示，類似以前打字機效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>郵箱輸入提示效果程式碼-螞蟻部落</title> 
<style type="text/css">
#content{
  width:400px;
  height:30px;
  line-height:30px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var ocontent=document.getElementById("content");
  var str="螞蟻部落歡迎您，只有奮鬥才會有美好的未來。";
  var i=0;
  var flag=null;
  function done(){
    if(i<str.length){
      ocontent.innerHTML=str.substring(0,i+1);
      i=i+1;
    } 
    else{
      clearInterval(flag);
    } 
  }
  flag=setInterval(done,200);
}
</script> 
<body> 
<div id="content"></div>
</body>  
</html>

以上程式碼中，字串的字元能夠挨個輸出。

一.實現原理:

建立done函式，它能夠擷取指定長度的字串，並將當前擷取的字串寫入div，每執行一次，擷取的長度都要加1。使用定時器函式每隔指定的事件執行一次此此函式，這樣逐字展現的效果。

二.實現原理:

（1）.getElementById()函式可以參閱document.getElementById()一章節。

（2）.substring()函式可以參閱JavaScript substring()一章節。 

（3）.setInterval()函式可以參閱setInterval()方法一章節。 

（4）.clearInterval()函式可以參閱window.clearInterval()一章節。

相關文章