Question

我正在尝试编写一个每2秒更改占位符的代码。另外，还可以输入一个字母一个字母，然后一个一个地擦除。

不幸的是，它无法正常工作。

我是JS的新手，来自Python，所以也许我错过了一些非常简单的东西。

// Espera o HTML da página carregar

$(document).ready(function(){

    // Frases que aparecerão
    var phrases = ['Investir em ações', 'Tesouro-Direto', 'Valuation', 'Dados LREN3'];
    // Index da frase que será exibida
    var index = 0;
    // Tamanho da array
    var length = phrases.length;

    // Função que vai exibir as frases a cada intervalo de tempo
    setInterval(function(){

        // Verifica se o índice não é maior que o tamanho da array
        if (index < length){

            // Frase que será escrita
            var newPlaceholder = phrases[index];

            // Tamanho da frase que será escrita
            var txtLen = newPlaceholder.length;

            // Caracter pelo qual a frase vai começar a ser escrita
            var char = 0;

            // Inicializa a variável que vai receber a função timeout
            var timeout;

            // Função que digita a frase letra por letra
            function typeIt(){

                // Tempo que vai demorar até a próxima letra ser escrita
                var humanize = Math.round(Math.random() * (200 - 30) + 30);

                // Executa a função depois de alguns segundos (humanize)
                timeout = setTimeout(function(){

                    // Deve estar sempre um caracter a frente por conta do slice
                    char++;

                    // Parte da string que será digitada
                    var substr = newPlaceholder.substring(0, char);

                    // Digita a parte da string
                    $('input').attr('placeholder', substr + "|");

                    // Executa a função type
                    typeIt();

                    // Caso já tenha chegado ao fim da string
                    if (char === txtLen) {
                        $('input').attr('placeholder', $('input').attr('placeholder').slice(0, -1));
                        clearTimeout(timeout);
                    }
                }, humanize);
            }
            index++;
        }
    }, 2000);
});

Answer 1

您永远不会启动一系列打字。您应将typeIt();回调的最后一行称为setInterval()。

JavaScript动画占位符不起作用

1 个答案: