jQuery 动态输入文字展示效果

最新推荐文章于 2024-07-26 03:33:21 发布

卡尔特斯

最新推荐文章于 2024-07-26 03:33:21 发布

阅读量638

点赞数

分类专栏： jQuery 文章标签： jquery jqueryui

本文链接：https://blog.csdn.net/zz00008888/article/details/109327047

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    @keyframes blink {
      0%,
      100% {
        opacity: 1
      }
      50% {
        opacity: 0
      }
    }
    @-webkit-keyframes blink {
      0%,
      100% {
        opacity: 1
      }
      50% {
        opacity: 0
      }
    }
    @-moz-keyframes blink {
      0%,
      100% {
        opacity: 1
      }
      50% {
        opacity: 0
      }
    }
    .wrap {
      width: 1000px;
      text-align: center;
      margin: 100px auto 0;
    }
    .wrap h1 {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 300;
    }
    .word {
      font-weight: 700;
    }
    .typed-cursor {
      opacity: 1;
      -webkit-animation: blink .7s infinite;
      -moz-animation: blink .7s infinite;
      animation: blink .7s infinite;
      display: none;
    }
    .saySection {
      margin-top: 50px;
    }
    .saySection input {
      font-size: 30px;
    }
    .saySection .txtSay {
      padding-left: 10px;
    }
    .saySection .btnSay {
      display: inline-block;
      padding: 0 20px;
      cursor: pointer;
    }
  </style>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(document).ready(function () {
      // 监听 Say 点击
      $('.saySection input:button').click(function () {
        // 获取字符串
        var str = $('.saySection input:text').val(); // '红鲤鱼与绿鲤鱼与驴'
        var strArr = str.split('');
        var wordStr = '';
        var index = 0;
        var timer = null;
        // 显示光标
        $('.typed-cursor').show();
        // 定时器
        timer = setInterval(() => {
          // 获取单个文字
          var word = strArr[index];
          if (word === undefined) {
            clearInterval(timer);
            $('.typed-cursor').hide();
          }else{
            // 每次往.word中插入一个文字
            wordStr += word;
            // 进行展示
            $('.word').text(wordStr)
            // 索引+1
            index++;
          }
        }, 200);
      });
    })
  </script>
</head>
<body>
  <div class="wrap">
    <h1>
        You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
    </h1>
    <div class="saySection">
      <input type="text" id="inValue" class="txtSay" />
      <input type="button" value="Say" id="btnSay" class="btnSay" />
    </div>
  </div>
</body>
</html>