时间戳

首页 > 解决方案 > 生成多个随机字母来创建解密效果？

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

问题描述

我想创建一个像这样的效果链接！（背景中的行星名称）

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

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

但是当我使用函数 randomLetterEffect 时，我在第一个字母上一直被阻塞，并且没有出现月亮这个词！

为什么我不在 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>

我非常感谢您的阅读！

标签： javascriptrandom

解决方案

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

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>

推荐阅读