如何重複自動鍵入文字

Question

我正在嘗試製作一個javascript/jquery代碼，它會自動鍵入一個字符串，然後在完全鍵入字符串之後，清除以前鍵入的字符串並再次鍵入它。目前，我所有的代碼都是輸入一次字符串。我知道如何保持循環，但它只是開始鍵入它停止的地方，並且不清除字符串。使用Javascript：

var txt='Typing text...'.split(''); 

var delay=850; 

for (i=0; i<txt.length;i++){ 
setTimeout(function(){   
    $('.autoText').append(txt.shift()) 
}, delay * i)  
} 

，這裏是我的html：

<h1 class="autoText" style="font-size: 50px; color: #7CFC00; margin-top: 0em; margin-left: 25%;"></h1> 

Answer 1

這是你想要的嗎？

DEMO

var txt = 'Typing text...'.split(''); 

var delay = 850; 

function type() { 
    for (i = 0; i < txt.length; i++) { 
     setTimeout(function() { 
      $('.autoText').append(txt.shift()); 
     }, delay * i); 
    } 

    // delay * i + 1000 means 1 second after the above text was finished typing 

    setTimeout(function(){ 
     // after finish, clear text in h1 element 
     $('.autoText').text(''); 

     // fire `type` method again, with `txt` reset to its original value 
     type(txt = 'Typing text...'.split('')); 

    }, delay * i + 1000); 
} 

type(); // call type at least once 

Answer 2

這裏是OOP解決方案，對象文本的方式。也可以使用可以更改延遲的方法。並且在將來您可以添加更多方法，例如字符串的更改大小寫或使用setter方法更改動畫的效果。你可以將它附加到任何具有任何字符串的元素。 也沒有像jQuery一樣的依賴關係。如果你不想依賴jQuery或文檔準備好的func和你有依賴關係，你必須把這些代碼放在DOM的底部。 希望它對你有所幫助。

var animText = { 

     animStr: '', 
     delay: 300, 

     setDelay: function(delay) { 
      this.delay = delay; 
     }, 

     DoAnimation: function(string, selector) { 

      this.animStr = string.split(''); 


      for (var i = 0; i <= string.length-1; i++) { 

       setTimeout(function() {  
        document.getElementById(selector).innerHTML += animText.animStr.shift();     
       },this.delay * i);    
      }; 

      setTimeout(function() {     
       document.getElementById(selector).innerHTML = '';     
       animText.DoAnimation(string, selector);     

      }, this.delay * i + 1200) 

     } 

    } 


    animText.DoAnimation("Hello", "animStr"); 
    animText.setDelay(900); 

Answer 3

var txt='Typing text...'.split(''); 

var delay=850; 

for (i=0; i<txt.length;i++){ 
setTimeout(function(){ 
    $('.autoText').text(''); 
    $('.autoText').append(txt.shift()) 
}, delay * i)  
} 

Answer 4

你可以使用遞歸：

var txt='Typing text...'; 
var delay=850; 

function TypeText($el, txt, currentIndex, timeout) { 
    setTimeout(function() { 
     //If finished writing, restart at 0 
     if (currentIndex >= txt.length) { 
      TypeText($el, txt, 0, 1000); 
      return; 
     } 

     //If at 0, empty the text 
     if (currentIndex == 0) $el.empty(); 

     //Append current letter 
     $el.append(txt[currentIndex]); 

     //Append next letter 
     TypeText($el, txt, currentIndex+1, timeout); 
    }, timeout); 
} 

TypeText($('.autoText'), txt, 0, delay) 

fiddle here

Answer 5

var txt = 'Typing text...'.split(''), 
    $h1 = $('.autoText'), 
    len = txt.length, 
    delay = 850, 
    i = 0; 

setInterval(function() { 
    $h1.append(txt[i++]); 
    if (i > len) { 
     $h1.empty(); 
     i = 0; 
    } 
}, delay); 

DEMO：http://jsfiddle.net/yt6hm4hc/

Answer 6

如何：

var txt='Typing text...'; 

var delay=850; 

var i = 0; 

function type() { 
    if (i < txt.length) { 
    $('.autoText').append(txt[i]); 
    i++; 
    } else { 
    $('.autoText').text(''); 
    i = 0; 
    } 
    setTimeout(type, delay); 
} 

type(); 

http://jsfiddle.net/16v15ufv/

Answer 7

原諒矯枉過正，但如果你做的一切真的通用的，那麼你可以在其他地方重複使用位

生成字符串的每個字符的函數，每個調用一個字符

function stringGenerator(str) { 
    var i = 0; 
    return function() { 
     if (i < str.length) 
      return str.charAt(i++); 
     i = 0; 
     return null; 
    }; 
} 

使用setTimeout循環播放功能，與一對夫婦整潔的小竅門停止循環

function timeoutLoop(fn, freq, callback) { 
    function looper() { 
     var ret = fn(); 
     if (ret !== false && ret !== null && ret !== undefined) 
      return window.setTimeout(looper, freq); 
     if (callback) 
      callback(); 
    } 
    window.setTimeout(looper, freq) 
} 

與邏輯結合這些關於DOM中的文本的函數，產生你的打字效果

function type(node, str, freq) { 
    var s = stringGenerator(str), 
     f = function() { 
      var chr = s(); 
      if (chr === null) 
       return false; 
      if (node.lastChild.nodeType === 3) 
       node.lastChild.data += chr; 
      else 
       node.appendChild(document.createTextNode(chr)); 
      return true; 
     }; 
    timeoutLoop(f, freq); 
} 

最後，調用，例如要有這個詞你好世界！寫入<body>一個字都是500毫秒

type(document.body, 'Hello world!', 500); 

這是100％的香草

Answer 8

一個循環，你將創建頸部你自己的痛苦中使用setTimeout。

你可以使用遞歸，這樣的事情：

function repeatEternal(str, time){ 
    time = time*1000 || 200; 
    var position = 0 
     ,rdiv = document.querySelector('#repeater') 
     ,l2r = true; 

    return eternal(str); 

    function eternal(s){ 
     rdiv.textContent = l2r ? rdiv.textContent + s[0] : s.slice(0, -1); 
     l2r = s.length === 1 ? !l2r : l2r; 
     s = s.length < 2 ? str : !l2r ? s.slice(0,-1) : s.slice(1); 
     setTimeout(function(){ eternal(s); }, time); 
    } 
} 
// usage 
repeatEternal('Typing galore!', 0.3); 

這裏的jsFiddle