创建打字机效果

打字机效果是最常见的动态效果，如果不使用程序来实现，那么工作量将会非常大，使用程序中 String 类可以非常轻松地实现这种效果。

例如下面的实现代码：

✂️

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Sample</title>
  </head>
  <body>
    <!- 文字就显示在这个元素中： 200 像素宽， 100 像素高，并定义了边框样式 ->
    <div
      id="oDiv"
      style="width:200px;height:100px;border:2px #ccc dashed;padding:10px "
    ></div>
    <script type="text/javascript ">
      var typingText = " 放一段文字在这里，让它像打字机一样一个一个的打出来，显示出来 "; var count = 0;

      // 获取 div 元素的引用
      var oBlock = document.getElementById("oDiv"); // 下面的这个函数每 200
      毫秒调用一次 function type() { if (count <= typingText.length)
      {
      // 这里使用了 String.substring() 方法，目的是每次多获取一个字符
      // 注意变量 count 每次都是增加的，然后将这个值赋给 div 元素作为内容 // 所以，每次都显示多一个字符
       oBlock.innerHTML = typingText.substring(0, count); count++; } else {
      // 如果已经 type 完，那么就清除 200 毫秒的间隔调用
       window.clearInterval(intervalID);
      } } // 每 200 毫秒调用一次 type() 函数
      var intervalID = window.setInterval(type, 200);
    </script>
  </body>
</html>

该范例主要是利用了间隔调用函数和 String.substring() 方法，每次调用 type() 函数，就使用 String.substring() 方法多读取一个字符，然后更新 div 元素内的文本。实际上不是每次 " 打上去 " 一个字符，而是每次都使用新的文本去替换，这看上去像是打字机逐个打上去的。

技巧与提示

在这个应用程序中，还应当注意怎样引用 HTML 文件中的元素，并获取和设置元素中的值。