我们定好一段文字，然后让文字一个字一个字出来，像打字的效果一样，下面代码直接复制，然后直接看效果吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.dynamic-text {
font-size: 24px;
text-align: center;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid orange;
}
</style>
<title>Dynamic Text</title>
</head>
<body>
<div class="dynamic-text" id="dynamicText">选完后点击右上角的购物车图标</div>
<script src="./WTC/suidao-en/js/jquery.min.js"></script>
<script>
$(function () {
function animateText() {
var text = $('#dynamicText').text();
var length = text.length;
var delay = 100; // 每个字符显示的延迟时间
var textIndex = 0;
var isTyping = true; // 标识文字是否正在显示
var isHiding = false; // 标识文字是否正在隐藏
function typeText() {
if (textIndex < length && isTyping) {
$('#dynamicText').text(text.substring(0, textIndex + 1));
textIndex++;
setTimeout(typeText, delay);
} else {
isTyping = false; // 文字显示完成
isHiding = true; // 准备开始隐藏文字
setTimeout(eraseText, 1000); // 文字停顿1秒后开始隐藏
}
}
function eraseText() {
if (textIndex >= 0 && isHiding) {
$('#dynamicText').text(text.substring(0, textIndex));
textIndex--;
setTimeout(eraseText, delay);
} else {
isTyping = true; // 开始重新显示
isHiding = false; // 停止隐藏
textIndex = 0; // 重置 textIndex
setTimeout(typeText, 1000); // 文字停顿1秒后开始显示
}
}
typeText();
}
animateText();
});
</script>
</body>
</html>