如何以打字效果的形式顯示跨度標簽內的輸入值？-有解無憂

當我單擊write按鈕時，輸入的值應該以caption打字效果的形式顯示在帶有 id 的 span 內。但是任何字符的打字速度都應該是30ms。這意味著當顯示第一個字符時，第二個字符顯示延遲 30ms 并且也到最后。文本的顯示會延遲 30 毫秒（第一個setTimeout）。我寫了下面的代碼，但它沒有用。輸出為數字形式。如何解決？

const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");

function typing() {
  const input_array = input.value.split("");
  setTimeout(myfunction(), 30);

  function myfunction() {
    for (let i = 0; i < input_array.length; i  ) {
      caption.innerHTML  = setTimeout(function() {
        return input_array[i];
      }, 30);
    }
  }
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  background-color: #505050;
}

.container {
  background-color: black;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  gap: 8px;
  width: 680px;
  height: 360px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.console {
  margin: 0;
  color: #fff;
  font-size: 27px;
}

#cursor {
  display: inline-block;
  width: 16px;
  height: 4px;
  margin-bottom: -5px;
  margin-left: 5px;
  background-color: #fff;
  animation: cursorMotion 1s 0.5s ease infinite;
}

@keyframes cursorMotion {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main {
  height: 80%;
  padding: 40px;
  padding-bottom: 0;
}

.footer {
  height: 20%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.footer button {
  height: 35px;
  min-width: 120px;
  font-family: inherit;
  cursor: pointer;
  font-size: 16px;
}

.footer input {
  height: 35px;
  width: 230px;
  font-family: inherit;
  padding: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/dist/font-face.css" rel="stylesheet" type="text/css" />
  <title>???? ????</title>
</head>

<body>
  <div class="container">
    <main class="main">
      <p class="console">
        <span>C:\</span>
        <span id="caption"></span>
        <span id="cursor"></span>
      </p>
    </main>
    <footer class="footer">
      <input type="text" id="user-caption" placeholder="your text ..." />
      <button id="test-typing" onclick="typing()">write</button>
      <button id="test-erasing">eraser</button>
    </footer>
  </div>
  <script src="main.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");

  function typing() {
    const input_array = input.value.split("");
    myfunction(input_array);

    function myfunction(input) {
      if (!input.length) return;
      const w = input.shift();
      caption.innerHTML  = w;

      setTimeout(() => myfunction(input), 30);
    }
  }

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  background-color: #505050;
}

.container {
  background-color: black;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  gap: 8px;
  width: 680px;
  height: 360px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.console {
  margin: 0;
  color: #fff;
  font-size: 27px;
}

#cursor {
  display: inline-block;
  width: 16px;
  height: 4px;
  margin-bottom: -5px;
  margin-left: 5px;
  background-color: #fff;
  animation: cursorMotion 1s 0.5s ease infinite;
}

@keyframes cursorMotion {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main {
  height: 80%;
  padding: 40px;
  padding-bottom: 0;
}

.footer {
  height: 20%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.footer button {
  height: 35px;
  min-width: 120px;
  font-family: inherit;
  cursor: pointer;
  font-size: 16px;
}

.footer input {
  height: 35px;
  width: 230px;
  font-family: inherit;
  padding: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/dist/font-face.css" rel="stylesheet" type="text/css" />
  <title>???? ????</title>
</head>

<body>
  <div class="container">
    <main class="main">
      <p class="console">
        <span>C:\</span>
        <span id="caption"></span>
        <span id="cursor"></span>
      </p>
    </main>
    <footer class="footer">
      <input type="text" id="user-caption" placeholder="your text ..." />
      <button id="test-typing" onclick="typing()">write</button>
      <button id="test-erasing">eraser</button>
    </footer>
  </div>
  <script src="main.js"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/427942.html

標籤：javascript 反应形式设置超时

上一篇：Linq通過復合鍵過濾串列（包含和不包含）

下一篇：表單發送成功后隱藏“提交”按鈕，然后顯示成功訊息