JavaScript实现文字打印机效果实例代码
作者：wuhen_n
通过逐字显示文本,模拟打字机逐字键入的动画效果,可以广泛应用于对话、引导教程和交互式界面中,这篇文章主要介绍了JavaScript实现文字打印机效果的相关资料,需要的朋友可以参考下
前言
文字打印机效果：通过逐字显示文本，模拟打字机逐字键入的动画效果，可以广泛应用于对话、引导教程和交互式界面中。
文字打印机
文字打印机主要通过js控制实现，其核心思想是对文本字符串进行遍历，每隔一段时间输入一个文字，直到文本字符串遍历完成；同时为了保持空格和换行，需要用到 white-space: pre-wrap; 属性。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字打印机效果</title>
<style>
.hellow-text {
white-space: pre-wrap; /* 保持空格和换行 */
}
</style>
</head>
<body>
<div class="hellow-text" id="printer"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 要打印的文本
const text = "这是一个文字打印机效果示例。\n请观察文字如何逐个显示。";
const printerElement = document.getElementById('printer');
let index = 0;
function printText() {
if (index < text.length) {
printerElement.textContent += text.charAt(index);
index++;
setTimeout(printText, 200); // 每隔200毫秒打印一个字符
}
}
printText(); // 开始打印
});
</script>
</body>
</html>
效果预览
带光标的文字打印机
上述代码中，我们实现了简单的文字打印机，现在我们来为文字添加一个光标效果，让它更贴合我们实际的文字打印效果：
代码实现
<style>
.hellow-text {
white-space: pre-wrap; /* 保持空格和换行 */
}
/* 添加光标样式 */
.cursor {
display: inline-block;
width: 2px;
height: 16px;
background-color: black;
margin-left: 2px;
vertical-align: middle;
animation: blink 1s step-end infinite;
}
/* 光标闪烁动画 */
@keyframes blink {
50% {opacity: 0;}
}
</style>
<body>
<div class="hellow-text" id="printer"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 要打印的文本
const text = "这是一个文字打印机效果示例。\n请观察文字如何逐个显示。";
const printerElement = document.getElementById('printer');
let index = 0;
// 创造光标属性span
let cursorElement = document.createElement('span');
cursorElement.classList.add('cursor');
function printText() {
if (index < text.length) {
printerElement.textContent += text.charAt(index);
// 不存在光标属性，则添加
if (!printerElement.contains(cursorElement)) {
printerElement.appendChild(cursorElement);
}
index++;
setTimeout(printText, 200); // 每隔200毫秒打印一个字符
}
}
printText(); // 开始打印
});
</script>
</body>
效果预览
结语
通过本文的介绍，相信你已经掌握了如何使用JS实现文字打印机效果，希望这些技巧能帮助你提升网页设计的视觉效果。
到此这篇关于JavaScript实现文字打印机效果的文章就介绍到这了,更多相关JS文字打印机效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！