<!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>
