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

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 2

这个怎么样：

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 3

原谅矫枉过正，但如果你把所有东西都变得非常通用，那么你可以在其他地方重复使用位

生成字符串的每个字符的函数，每次调用一个

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);
}

最后，调用，例如每隔 500毫秒将 Hello world！写入<body>一个字符

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

这是100％香草

Answer 4

这是OOP解决方案，采用Object文字方式。还有使用方法可以更改延迟。并且在将来你可以添加更多方法，例如更改字符串的大小写或使用setter方法更改动画效果。你可以将它附加到任何带有任何字符串的元素。它也没有像jQuery这样的依赖项。如果您不想要jQuery的依赖关系或者文档就绪函数内部以及您具有依赖性，那么您必须将此代码放在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 5

这是你想要的吗？

<强> 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 6

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 7

你可以使用递归：

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 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

如何重复自动键入文本

8 个答案: