js实现制作一个页面，页面上包含一个文本框、一个“开始”按钮、一个“暂停”按钮，用户点击“开始”按钮后，网页中从左到右以打字机效果（文字单个增加），循环显示用户输入的文本。用户点击“暂停”按钮时，暂停效果；

下面是一个简单的实现示例：

HTML代码：

<input type="text" id="input-text">
<button id="btn-start">开始</button>
<button id="btn-pause">暂停</button>
<div id="output-text"></div>

JS代码：

// 获取DOM元素
const inputText = document.getElementById('input-text');
const btnStart = document.getElementById('btn-start');
const btnPause = document.getElementById('btn-pause');
const outputText = document.getElementById('output-text');

// 定义变量
let currentIndex = 0; // 当前显示的字符索引
let timerId = null; // 定时器ID

// 开始按钮点击事件
btnStart.addEventListener('click', function() {
  // 每次点击开始按钮时，都重置currentIndex和outputText内容
  currentIndex = 0;
  outputText.innerText = '';

  // 启动定时器
  timerId = setInterval(function() {
    // 判断是否显示完所有文字
    if (currentIndex >= inputText.value.length) {
      currentIndex = 0; // 重置currentIndex
    }

    // 取出下一个字符并添加到outputText中
    const nextChar = inputText.value.charAt(currentIndex);
    outputText.innerText += nextChar;

    currentIndex++; // 增加currentIndex
  }, 100);
});

// 暂停按钮点击事件
btnPause.addEventListener('click', function() {
  clearInterval(timerId); // 清除定时器
  timerId = null; // 重置timerId
});

该示例中，我们通过定时器来实现打字机效果。每隔一段时间（这里设为100毫秒）从输入框中取出下一个字符并添加到输出框中，直到显示完所有字符。同时，我们通过变量`timerId`来保存定时器的ID，并在暂停按钮点击事件中清除定时器。