打字机效果实例代码

 

一个简单的打字机效果HTML页面，它包含了一些CSS样式和JavaScript脚本，用于创建一个文本打字效果的动画。下面是完整代码。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="index.css" />
  <title>打字机效果</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
    * {
      box-sizing: border-box;
    }
    body {
      background-color: #f4feff;
      font-family: 'Roboto', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      margin: 0;
    }
    div {
      position: absolute;
      bottom: 20px;
      background: rgba(0, 0, 0, 0.1);
      padding: 10px 20px;
      font-size: 18px;
    }
    input {
      width: 50px;
      padding: 5px;
      font-size: 18px;
      background-color: #fff;
      border: none;
      text-align: center;
    }
    input:focus {
      outline: none;
    }
  </style>
</head>
<body>
  <h1 id="text">Starting…</h1>
  <div>
    <label for="speed">速度:</label>
    <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
  </div>
  <script src="index.js"></script>
  <script> 
    const textEl = document.getElementById('text');
    const speedEl = document.getElementById('speed');
    const text = '修改此处：Bzmzz站长社区收集。（www.bzmzz.com）';
    let idx = 1;
    let speed = 300 / speedEl.value;
    writeText();
    function writeText() {
      textEl.innerText = text.slice(0, idx);
      idx++;
      if(idx > text.length) {
        idx = 1;
      }
      setTimeout(writeText, speed);
    }
    speedEl.addEventListener('input', (e) => speed = 300 / e.target.value);
  </script>	
</body>
</html>