textarea文本展示，定时器模仿一个一个出字的效果。

textarea文本框内展示一个一个字显示的效果

str.substring(from，to)从字符串中拿到两个下标之间的字符。

<!DOCTYPE html>
<html lang="en">
<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">
    <title>上屏测试</title>
</head>
<body>
    <div>
        <textarea onclick="stopInterval" name="" id="textarea" cols="60" rows="10"></textarea>
    </div>
</body>
<script>
    var text = "循环允许您编写一个执行指定次数的循环控制结构。语法 Scala 语言中 for 循环的语法"
    var element = document.getElementById('textarea')
    var count = 0
    function update() {
        if(count <= text.length){
            element.value = text.substring(0,count)
            count++
        } else {
            element.value = ''
            count = 0
        }
    }
    var interval = setInterval(update,100)
    var con = element.value
    var content = 0
    function stopInterval() {
        if(content < 1) {
             element.value = con 
        } 
        window.clearInterval(interval)
        content = 1
        element.value = ''
    }
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

textarea上屏展示文字先快再慢，再变快。

<span style="font-size:14px;">
    <textarea style="width: 1000px;height: 200px;" rows="" cols="" id="keshi_big_kuang" onclick="stopInterval();" name="keshi_big_kuang" class="textarea">
</textarea>
<script>
  var text = "如今高端手机领域再次陷入了同质化的旋涡，相似的外观工艺、相同的SoC处理器平台、一样的UFS3.0闪存、4800万像素起步的AI多摄矩阵，大家很难在体验上拉开足够大的差距。";
  var element = document.getElementById('keshi_big_kuang');
  var count = 0;
  function type() {
      if (count <= text.length) {
          element.value = text.substring(0, count);
          count++;
          var m_time = 150;
          var rate = 0.0;
          switch(count % 10)
          {
                case 0:
                    rate = 1.0;
                    break;
                case 1:
                    rate = 0.6;
                    break;
                case 2:
                    rate = 0.3;
                    break;
                case 3:
                    rate = 0.0;
                    break;
                case 4:
                    rate = 0.0;
                    break;
                case 5:
                    rate = 0.0;
                    break;
                case 6:
                    rate = 0.0;
                    break;
                case 7:
                    rate = 0.3;
                    break;
                case 8:
                    rate = 0.6;
                    break;
                case 9:
                    rate = 1.0;
                    break;
          }
          sleep(m_time * rate)
          /*
          if(count % 10 == 0)
          {
            sleep(250)
          } 
          if(count < text.length / 10)
          {
              sleep(100 * (count / (text.length / 5)))
          }
          if(count > (text.length * 0.9))
          {
              sleep(100 * ((text.length - count) / (text.length * 0.1)))
          } */
      } else {
          element.value = '';
          count = 0;
      }
   
  }
  function sleep(delay) {
  var start = (new Date()).getTime();
  while ((new Date()).getTime() - start < delay) {
    continue;
  }
}


  var intervalID = setInterval(type, 20);
  var content = element.value;
  var isTxtEmpty = 0;

  function stopInterval() {
      if (isTxtEmpty < 1) {
          element.value = content;
      }
      window.clearInterval(intervalID);
      isTxtEmpty = 1;
      element.value = '';
  }
</script></span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

相关阅读:
带你深度解析虚幻引擎4的照明和阴影知识
 【自然语言处理（NLP）】基于注意力机制的中-英机器翻译
 c#学习_第四弹
 harbor私有仓库部署
 net-tools 和 iproute2 笔记221103
【转】iOS消息推送机制
 java计算机毕业设计上虞烟草物流配送系统源码+系统+数据库+lw文档+mybatis+运行部署
 8.19 Day43---面试补充
 EPLAN-P8软件技术分享文章
 代码随想录Day12 二叉树 LeetCode T102二叉树的层序遍历 T226 翻转二叉树 T101 对称二叉树
原文地址：https://blog.csdn.net/tsqjxy/article/details/126785650