从用户输入中制作数组动画，如打字机(javascript）

Animate array from user input like typewriter (javascript)

本文关键字：打字机 javascript 动画 数组 输入 用户      更新时间：2023-09-26

我想我的问题与这个问题有点相似，但我真的无法从中找出如何满足我的特定需求。我正在构建一个非常基本的文本冒险，我希望在用户输入命令后返回的文本以打字机风格返回。以下是我到目前为止的命令片段（还会有更多，我不介意这将以一种有点乏味的方式构建）

    <script>
textIn  = document.getElementById("input-textbox");
textOut = document.getElementById("output-textbox");
function process(input) {
    if (input == "hi") { textOut.innerHTML += "Hello to you too!<br><br>"; }
    else if (input == "exit") { textOut.innerHTML += "No."; }
}
function go() {
    var input = textIn.value;
    textIn.value = "";
    var output = process(input);
    textOut.value += output + "'n";
}
</script>

和HTML

<div id="output-textbox">
  Returned text goes here.
</div>
<form onSubmit="go();return false;">
<input id="input-textbox" name="command" value="" autofocus="autofocus"/>
</form>

非常感谢您提前提供的帮助！这个解决方案不需要美观、代码化，也不需要非常漂亮。它必须工作，我对此没有任何标准！

根据William B的回答，这里有一个更精简的版本：

https://jsfiddle.net/sators/4wra3y1p/1/

HTML

<div id="output-typewriter"></div>

Javascript

function typewriterText(text) {
    var outEl = document.querySelector('#output-typewriter');
    var interval = 50; // ms between characters appearing
    outEl.innerHTML = '';
    text.split('').forEach(function(char, i){
      setTimeout(function () {
        outEl.innerHTML += char;
      }, i * interval);
    });
}
typewriterText('this is an example');

为循环中的每个字符创建一个超时，每个超时都比上一个晚一点。请参阅：https://jsfiddle.net/fswam77j/1/

var outputEl = document.querySelector('#output-textbox');
var charInterval = 50; // ms between characters appearing
function showOutput(text) {
  outputEl.innerHTML = '';
  for(var i = 0; i < text.length; i++) {
    showChar(text, i);
  }
}
function showChar(text, i) {
    setTimeout(function () {
      outputEl.innerHTML += text[i];
    }, i * charInterval);
}
showOutput('this is an example');

处理输入：

function process(input) {
    if (input == "hi") { 
        showOutput("Hello to you too!"); 
    }
    else if (input == "exit") { 
        showOutput("No."); 
    }
}
相关文章：