JavaScript动画占位符不起作用

2维

我正在尝试编写每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);
});
兰迪·卡斯本

您永远不会启动一系列的键入操作。您应该将其typeIt();作为setInterval()回调的最后一行

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章