Javascrpit特效之打字机效果

今天来看看怎么实现炫酷的打字机效果。即把一段话一个字一个字的显示出来。

效果图：

实现思路：

首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。再把判断段落的总字数，循环段落总字数来实现一个字一个字的输出。

js代码：

  
  


   
   


    
    


     
     


    
    

    
    


     
     

      
      var theNewsNum;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theAddNum;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var totalNum;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var CurrentPosion=
      0;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theCurrentNews;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theCurrentLength;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theNewsText;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theTargetLink;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theCharacterTimeout;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theNewsTimeout;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theBrowserVersion;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theWidgetOne;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theWidgetTwo;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theSpaceFiller;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theLeadString;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      var theNewsState;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      function startTicker(){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      // ------ 设置初始数值
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCharacterTimeout = 
      50;
      //字符间隔时间
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theNewsTimeout = 
      2000;
      //新闻间隔时间
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theWidgetOne =  
      "_";
      //新闻前面下标符1
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theWidgetTwo =  
      "-";
      //新闻前面下标符
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theNewsState = 
      1;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theNewsNum = 
      document.getElementById(
      "incoming").children.AllNews.children.length;
      //新闻总条数
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theAddNum = 
      document.getElementById(
      "incoming").children.AddNews.children.length;
      //补充条数
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        totalNum =theNewsNum+theAddNum;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCurrentNews = 
      0;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCurrentLength = 
      0;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theLeadString = 
      " ";
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theSpaceFiller = 
      " ";
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        runTheTicker();
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

       }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      // --- 基础函数
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      function runTheTicker(){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      if(theNewsState == 
      1){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
   
      if(CurrentPosion<theNewsNum){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

          setupNextNews();
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

         }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
   
      else{
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

          setupAddNews();
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

         }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

         CurrentPosion++;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
   
      if(CurrentPosion>=totalNum||CurrentPosion>=
      1){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

          CurrentPosion=
      0;
      //最多条数不超过num_gun条
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

         }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      if(theCurrentLength != theNewsText.length){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

         drawNews();
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      else{
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

         closeOutNews();
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

       }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      // --- 跳转下一条新闻
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      function setupNextNews(){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theNewsState = 
      0;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCurrentNews = theCurrentNews % theNewsNum;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theNewsText = 
      document.getElementById(
      "AllNews").children[theCurrentNews].children.Summary.innerText;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theTargetLink = 
      document.getElementById(
      "AllNews").children[theCurrentNews].children.Summary.children[
      0].href;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCurrentLength = 
      0;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      document.all.hottext.href = theTargetLink;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCurrentNews++;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

       }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      function setupAddNews() {
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theNewsState = 
      0;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCurrentNews = theCurrentNews % theAddNum;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theNewsText = 
      document.getElementById(
      "AllNews").children[theCurrentNews].children.Summary.innerText;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theTargetLink = 
      document.getElementById(
      "AllNews").children[theCurrentNews].children.Summary.children[
      0].href;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCurrentLength = 
      0;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      document.all.hottext.href = theTargetLink;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCurrentNews++;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

       }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      // --- 滚动新闻
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      function drawNews(){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      var myWidget;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      if((theCurrentLength % 
      2) == 
      1){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

         myWidget = theWidgetOne;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      else{
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

         myWidget = theWidgetTwo;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      document.all.hottext.innerHTML = theLeadString + theNewsText.substring(
      0,theCurrentLength) + myWidget + theSpaceFiller;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theCurrentLength++;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        setTimeout(
      "runTheTicker()", theCharacterTimeout);
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

       }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      // --- 结束新闻循环
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
 
      function closeOutNews(){
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
  
      document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        theNewsState = 
      1;
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

        setTimeout(
      "runTheTicker()", theNewsTimeout);
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

       }
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

      
      window.onload=startTicker;
     
     

    
    

  
  

原文发布时间：2018年06月30日

本文来源CSDN博客如需转载请紧急联系作者