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

最新推荐文章于 2024-06-04 16:31:38 发布

powerful*！

最新推荐文章于 2024-06-04 16:31:38 发布

阅读量290

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/tsqjxy/article/details/126785650

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

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>