<!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>
- demo 效果：
