废话不多说,代码如下.
引入 Typed.js及显示文本
首先,我们需要在 HTML 文件中引入 Typed.js 库。可以通过 CDN 的方式引入.
id为 element
使用 <span id="element"></span>
则是显示文字
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<span id="element"></span>
引入库和创建HTML结构后,我们可以通过JavaScript来初始化Typed.js,并设置相关参数。以下示例代码可直接使用:
<script>
var typed = new Typed("#element", {
strings: [
"这些是默认值...",
"你知道你应该做什么吗?",
"使用你自己的!",
"祝你有美好的一天!",
],
typeSpeed: 50,
startDelay: 1000,
backSpeed: 25,
smartBackspace: true,
shuffle: false,
backDelay: 700,
fadeOut: false,
fadeOutClass: "typed-fade-out",
fadeOutDelay: 500,
loop: true,
loopCount: Infinity,
showCursor: true,
cursorChar: "|",
autoInsertCss: true,
attr: null,
bindInputFocusEvents: false,
contentType: "html",
onBegin: self => {},
onComplete: self => {},
preStringTyped: (arrayPos, self) => {},
onStringTyped: (arrayPos, self) => {},
onLastStringBackspaced: self => {},
onTypingPaused: (arrayPos, self) => {},
onTypingResumed: (arrayPos, self) => {},
onReset: self => {},
onStop: (arrayPos, self) => {},
onStart: (arrayPos, self) => {},
onDestroy: self => {},
});
</script>
strings
: 要输入的字符串数组。typeSpeed
: 输入速度(毫秒)。startDelay
: 开始输入前的延迟时间(毫秒)。backSpeed
: 删除速度(毫秒)。smartBackspace
: 仅删除与前一个字符串不匹配的部分。shuffle
: 随机打乱字符串。backDelay
: 删除前的延迟时间(毫秒)。fadeOut
: 淡出而不是删除。fadeOutClass
: 淡出动画的 CSS 类。fadeOutDelay
: 淡出延迟时间(毫秒)。loop
: 循环字符串。loopCount
: 循环次数。showCursor
: 显示光标。cursorChar
: 光标字符。autoInsertCss
: 自动插入光标和淡出效果的 CSS 到 HTML <head>
。attr
: 输入属性,例如:输入占位符、值或仅 HTML 文本。bindInputFocusEvents
: 绑定焦点和失焦事件(如果元素是文本输入)。contentType
: ‘html’ 或 ‘null’ 表示纯文本。onBegin
: 在开始输入之前的回调函数。onComplete
: 所有输入完成后的回调函数。preStringTyped
: 在每个字符串输入之前的回调函数。onStringTyped
: 在每个字符串输入之后的回调函数。onLastStringBackspaced
: 在循环期间,最后一个字符串输入之后的回调函数。onTypingPaused
: 输入已停止的回调函数。onTypingResumed
: 输入在停止后重新开始的回调函数。onReset
: 重置后的回调函数。onStop
: 停止后的回调函数。onStart
: 开始后的回调函数。onDestroy
: 销毁后的回调函数。
<!-- Load library from the CDN -->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<!--显示-->
<span id="element"></span>
<script>
let typed;
let currentStrings = [`☘️LGZ海云博客YYDS`, `_北海彡制作☘️`];
function fetchRandomYiyan() {
return fetch('https://cn.apihz.cn/api/yiyan/api.php?id=88888888&key=88888888')
.then(response => response.json())
.then(data => data.msg);
}
function startTyped(strings) {
if (typed) {
typed.destroy();
}
typed = new Typed('#element', {
strings: strings,
typeSpeed: 30, // 打字速度
startDelay: 1000, // 开始延迟
backSpeed: 15, // 退格速度
smartBackspace: true,
shuffle: false,
backDelay: 800, // 退格延迟
fadeOut: false, // 不使用淡出效果
loop: true, // 循环
loopCount: Infinity, // 无限循环
showCursor: true,
cursorChar: "|",
autoInsertCss: true,
attr: null,
bindInputFocusEvents: false,
contentType: "html",
onBegin: self => ,
onComplete: self => {
// 当一个完整周期完成后,更新随机一言以备下一个周期
fetchRandomYiyan().then(newYiyan => {
currentStrings[currentStrings.length - 1] = `随机一言:${newYiyan}`;
startTyped(currentStrings);
});
},
preStringTyped: (arrayPos, self) => ,
onStringTyped: (arrayPos, self) => ,
onLastStringBackspaced: self => ,
onTypingPaused: (arrayPos, self) => ,
onTypingResumed: (arrayPos, self) => ,
onReset: self => ,
onStop: (arrayPos, self) => ,
onStart: (arrayPos, self) => ,
onDestroy: self =>
});
}
// 初始化设置
fetchRandomYiyan().then(initialYiyan => {
currentStrings.push(`随机一言:${initialYiyan}`);
startTyped(currentStrings);
}).catch(error => console.error('Error fetching random yiyan:', error));
</script>
在 Vue 项目中使用 Typed.js 也非常简单。我们可以通过在组件的 mounted 生命周期钩子中初始化 Typed.js。以下是一个示例:
npm install typed.js
<template>
<div>
<span id="typed-element"></span>
</div>
</template>
<script>
import Typed from "typed.js";
export default {
name: "TypedComponent",
mounted() {
const options = {
strings: [
"这些是默认值...",
"你知道你应该做什么吗?",
"使用你自己的!",
"祝你有美好的一天!",
],
typeSpeed: 50,
startDelay: 1000,
backSpeed: 25,
smartBackspace: true,
shuffle: false,
backDelay: 700,
fadeOut: false,
fadeOutClass: "typed-fade-out",
fadeOutDelay: 500,
loop: true,
loopCount: Infinity,
showCursor: true,
cursorChar: "|",
autoInsertCss: true,
attr: null,
bindInputFocusEvents: false,
contentType: "html",
onBegin: self => {},
onComplete: self => {},
preStringTyped: (arrayPos, self) => {},
onStringTyped: (arrayPos, self) => {},
onLastStringBackspaced: self => {},
onTypingPaused: (arrayPos, self) => {},
onTypingResumed: (arrayPos, self) => {},
onReset: self => {},
onStop: (arrayPos, self) => {},
onStart: (arrayPos, self) => {},
onDestroy: self => {},
};
new Typed("#typed-element", options);
},
};
</script>
<style scoped>
/* 添加一些样式以便更好地展示打字动画 */
#typed-element {
font-size: 24px;
color: #333;
}
</style>
结论
通过以上步骤,我们可以轻松地在网页上实现打字动画效果。Typed.js 提供了丰富的配置选项,可以满足各种不同的需求。
作者的才华横溢,让这篇文章成为了一篇不可多得的艺术品。
好 感谢分享!
网络流行语融入自然,贴近年轻读者。