Javascript 生成多个随机字母以创建解密效果？

我想创造一个这样的效果！。（背景中的行星名称）

所以我需要生成许多随机字母，然后才能逐个显示单词的字母

在我的测试中，我尝试在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菜单'）.data（'planet'）；
var letterChoice=“abcdefghijklmnopqrstuvxyz”
var length=text.length；
var超时；
var超时2；
var字符=0；
（函数打字机（）{
timeOut=setTimeout（函数（）{
字符++；
变量类型=文本。子字符串（0，字符）；
（函数ramdomLetterEffect（）{
timeOut2=setTimeout（函数（）{
变量类型=文本。子字符串（0，字符）；
var randomLetter=letterChoice.charAt（Math.floor（Math.random（）*letterChoice.length））；
$（'.planet name'）。文本（随机字母）；
ramdomLetterEffect（）；
如果（字符==长度）{
清除超时（超时2）；
}
},200);
}());
$（'.planet name'）。文本（类型）；
打字机（）；
如果（字符==长度）{
clearTimeout（超时）；
}
}, 1000);
}());
如果我正确理解了您的问题，这些问题都在您的代码中：

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

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

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

2-像这样更新班级的课文

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

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

工作代码


var text=$（“.planet菜单”）.data（“planet”）；
var letterChoice=“abcdefghijklmnopqrstuvxyz”；
var length=text.length；
var超时；
var超时2；
var字符=0；
（功能打字机）{
timeOut=setTimeout（函数（）{
字符++；
变量类型=文本。子字符串（0，字符）；
（函数ramdomLetterEffect（）{
timeOut2=setTimeout（函数（）{
变量类型=文本。子字符串（0，字符）；
var randomLetter=letterChoice.charAt(
Math.floor（Math.random（）*letterChoice.length）
);
如果（字符==长度）{
清除超时（超时2）；
返回；
}
$（“.planet name”）.text（$（.planet name”）.text（）.substr（0，字符）+随机字母）；
如果（字符==长度）{
清除超时（超时2）；
}否则{
ramdomLetterEffect（）；
}
}, 200);
})();
$（“.planet name”）.text（类型）；
打字机（）；
如果（字符==长度）{
clearTimeout（超时）；
}
}, 1000);
})();
如果我正确理解了您的问题，这些问题都在您的代码中：

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

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

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

2-像这样更新班级的课文

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

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

工作代码


var text=$（“.planet菜单”）.data（“planet”）；
var letterChoice=“abcdefghijklmnopqrstuvxyz”；
var length=text.length；
var超时；
var超时2；
var字符=0；
（功能打字机）{
timeOut=setTimeout（函数（）{
字符++；
变量类型=文本。子字符串（0，字符）；
（函数ramdomLetterEffect（）{
timeOut2=setTimeout（函数（）{
变量类型=文本。子字符串（0，字符）；
var randomLetter=letterChoice.charAt(
Math.floor（Math.random（）*letterChoice.length）
);
如果（字符==长度）{
清除超时（超时2）；
返回；
}
$（“.planet name”）.text（$（.planet name”）.text（）.substr（0，字符）+随机字母）；
如果（字符==长度）{
清除超时（超时2）；
}否则{
ramdomLetterEffect（）；
}
}, 200);
})();
$（“.planet name”）.text（类型）；
打字机（）；
如果（字符==长度）{
clearTimeout（超时）；
}
}, 1000);
})();
我决定编写一种非常模块化的方法来生成这种特殊效果，将效果本身与渲染方式分开：


const text=$（'.planet菜单'）.data（'planet'））
常量letterChoice='abcdefghijklmnopqrstuvwxyz'
混淆({
//必需：用于混淆的输入
字符串：文本，
//每个字符1
//默认值为1s
持续时间：text.length，
//每帧200毫秒
//默认为每秒60帧
fps:5，
//只有小写字母
//默认为所有可打印的ascii字符
随机：字母选择，
//按顺序使用字符
//默认为随机顺序
下一步（[index]）{return index}，
//必需：更新视图
呈现（字符串）{$（'.planet name'）.text（字符串）}
}).然后（（）=>{
//当效果完成时
console.log（'done！'）
})
。行星名称{
字体系列：monospace；
}
我决定编写一种非常模块化的方法来生成这种特殊效果，将效果本身与渲染方式分开：


const text=$（'.planet菜单'）.data（'planet'））
常量letterChoice='abcdefghijklmnopqrstuvwxyz'
混淆({
//必需：用于混淆的输入
字符串：文本，
//每个字符1
//默认值为1s
持续时间：text.length，
//每帧200毫秒
//默认为每秒60帧
fps:5，
//只有小写字母
//默认为所有可打印的ascii字符
随机：字母选择，
//按顺序使用字符
//默认为随机顺序
下一步（[index]）{return index}，
//必需：更新视图
呈现（字符串）{$（'.planet name'）.text（字符串）}
}).然后（（）=>{
//当效果完成时
console.log（'done！'）
})
。