javascript - 生成多个随机字母来创建解密效果？

Question

我想创建这样的效果 a link !. (背景中的行星名称)

所以我需要先生成许多随机字母才能一一显示我的单词的字母。

在我的测试中，我尝试在我的 div.planet-name 中逐个字母地显示单词“moon”，延迟为 1000 毫秒。在显示月亮的字母之前，我想生成许多随机字母。

但是当我使用 randomLetterEffect 函数时，我在第一个字母上被阻止，并且单词“moon”没有出现!

为什么我不在 text.substring(0, 1)、text.substring(0, 2)、text.substring(0, 3) 等中生成随机字母...而只在 text.substring( 0, 0) ?

我试试这个:

var text = $('.planet-menu').data('planet');
var letterChoice = "abcdefghijklmnopqrstuvwxyz"
var length = text.length;
var timeOut;
var timeOut2;
var character = 0;


(function typeWriter() { 
    timeOut = setTimeout(function() {
        character++;
        
        var type = text.substring(0, character);

        (function ramdomLetterEffect(){
            timeOut2 = setTimeout(function() {

                var type = text.substring(0, character);
                var randomLetter = letterChoice.charAt(Math.floor(Math.random() * letterChoice.length));
                $('.planet-name').text(randomLetter);
                ramdomLetterEffect();

                if (character == length) {
                    clearTimeout(timeOut2);
                }

            },200);
        }());

        $('.planet-name').text(type);
        typeWriter();
        
        if (character == length) {
            clearTimeout(timeOut);
        }
        
    }, 1000);
}());

<div class="planet-menu" data-planet="moon"></div>

<div class="planet-name"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

非常感谢您的阅读!

Answer 1

如果我正确理解您的问题，这些问题就在您的代码中:

1-在更新类文本之前检查字符串的长度

if (character==length) {
  clearTimeout(timeOut2);
  return;
}

2-像这样更新类文本

$(".planet-name").text($(".planet-name").text().substr(0, character) + randomLetter);

工作代码

var text = $(".planet-menu").data("planet");
var letterChoice = "abcdefghijklmnopqrstuvwxyz";
var length = text.length;
var timeOut;
var timeOut2;
var character = 0;

(function typeWriter() {
  timeOut = setTimeout(function() {
    character++;

    var type = text.substring(0, character);

    (function ramdomLetterEffect() {
      timeOut2 = setTimeout(function() {
        var type = text.substring(0, character);
        var randomLetter = letterChoice.charAt(
          Math.floor(Math.random() * letterChoice.length)
        );
        if (character == length) {
          clearTimeout(timeOut2);
          return;
        }
        $(".planet-name").text($(".planet-name").text().substr(0, character) + randomLetter);


        if (character == length) {
          clearTimeout(timeOut2);
        } else {
          ramdomLetterEffect();
        }
      }, 200);
    })();

    $(".planet-name").text(type);
    typeWriter();

    if (character == length) {
      clearTimeout(timeOut);
    }
  }, 1000);
})();

<div class="planet-menu" data-planet="moon">
</div>

<div class="planet-name"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>