当前位置： 首页 > news >正文

JavaScript - 好玩的打字动画

news 2025/12/6 17:06:08

效果预览：
JS打字动画效果预览动图
请添加图片描述

🚀HTML版本

<!DOCTYPE html>
<html>
<head><title>打字动画示例</title><style>.typewriter {color: #000;overflow: hidden; /* 隐藏溢出的文本 */white-space: nowrap; /* 不换行 */border-right: .15em solid #000; /* 添加光标样式 */animation: blink-caret .75s step-end infinite;}/* 光标闪烁 */@keyframes blink-caret {from, to {border-color: transparent}50% {border-color: #000}}</style><script>// 页面加载完成后执行window.onload = function () {// 获取文本节点var textNode = document.getElementById('text');// 获取文本内容var text = textNode.innerHTML;// 清空文本内容textNode.innerHTML = '';// 逐个显示字符的定时器setTimeout(() => {var timer = setInterval(function () {// 检查是否已显示完全部字符if (text.length <= 0) {clearInterval(timer);textNode.classList.remove('typewriter');return;}// 取出第一个字符并在页面上显示var char = text.substring(0, 1);textNode.innerHTML += char;// 移除已显示的字符text = text.substring(1);}, 50);}, 2000);};</script>
</head>
<body>
<div><span id="text" class="typewriter">横向领域和垂直领域是两个在不同层面上对领域或行业的分类方式。</span>
</div>
</body>
</html>

🚀Vue2版本

<template><div class="typing-data-container"><div class="typing-data-question"><el-row>什么是横向领域和垂直领域？<el-button type="primary" icon="el-icon-search" circle @click="getAnswer" /><el-button type="danger" icon="el-icon-delete" circle @click="clearAnswer" /></el-row></div><div v-show="result2"><el-card shadow="hover">{{ result2 }}</el-card></div></div>
</template><script>
export default {name: 'TypingData',data() {return {typingCursor: true,rawData: '横向领域和垂直领域是两个在不同层面上对领域或行业的分类方式。\n' +'\n' +'横向领域（Horizontal Domain）：指的是跨越多个行业或领域的广泛应用。在横向领域中，一种解决方案、技术或产品可以适用于多个不同的行业或领域。例如，大数据分析、人工智能、云计算等技术和解决方案可以在各种行业中应用，如金融、医疗、零售等。\n' +'\n' +'垂直领域（Vertical Domain）：指的是特定的行业或领域，也称为“垂直市场”。在垂直领域中，解决方案、技术或产品专注于满足特定行业的需求和特点。例如，医疗健康领域的电子病历系统、金融领域的支付解决方案、零售领域的电子商务平台等。\n' +'\n' +'横向领域和垂直领域的划分有助于更好地理解和分类不同的市场、产品和服务。横向领域解决方案可以在多个行业中应用，具有更广泛的适用性。而垂直领域解决方案则更专注于特定行业的需求和特点，可以提供更定制化和针对性的解决方案。',result2: '',result2Timer: null}},methods: {getAnswer() {this.result2 = '🔍处理中...'// 逐个显示字符的定时器setTimeout(() => {this.result2 = ''const words = this.rawData.split('')let currentPtr = 0this.result2Timer = setInterval(() => {// 检查是否已显示完全部字符if (currentPtr >= words.length) {clearInterval(this.result2Timer)this.typingCursor = falsereturn}this.result2 += words[currentPtr]currentPtr++}, 50)}, 2000)},clearAnswer() {this.result2 = ''clearInterval(this.result2Timer)}}
}
</script><style lang="scss" scoped>
.typing-data {&-container {margin: 30px;white-space: pre-line; /* pre-line、nowrap */}&-question {margin: 0 0 20px 20px;}
}
</style>





END.

相关文章：

JavaScript - 好玩的打字动画

效果预览&#xff1a; &#x1f680;HTML版本 <!DOCTYPE html> <html> <head><title>打字动画示例</title><style>.typewriter {color: #000;overflow: hidden; /* 隐藏溢出的文本 */white-space: nowrap; /* 不换行 */border-right: .…...

编程日记 2023/9/6 15:18:59

rpm打包

文章目录 rpm打包 1. rpm打包步骤0&#xff09;准备工作&#xff1a;安装打包工具rpm-build和rpmdevtools&#xff08;1&#xff09;在线安装&#xff08;2&#xff09;离线安装 1&#xff09;创建初始化目录2&#xff09;准备打包内容3&#xff09;编写打包脚本 spec文件4&…...

编程日记 2023/9/6 15:17:58

匠心新品：大彩科技超薄7寸WIFI线控器发布，热泵、温控器、智能家电首选！

一、产品介绍 此次发布一款7寸高清全新外壳产品&#xff0c;让HMI人机界面家族再添一新成员。该产品相比其他外壳有以下5个大改动&#xff1a; 1 表面玻璃盖板使用2.5D立体结构&#xff1b; 2 液晶盖板采用一体黑设计&#xff0c;且液晶屏与触摸板是全贴合结构&#xff1b; …...

编程日记 2023/9/6 15:16:57

华为云云服务器评测｜使用云耀云服务器L实例部署Portainer工具

华为云云服务器评测&#xff5c;使用云耀云服务器L实例部署Portainer工具 一、云耀云服务器L实例介绍1.1 云耀云服务器L实例简介1.2 云耀云服务器L实例特点1.3 云耀云服务器L实例使用场景 二、本次实践介绍2.1 本次实践简介2.2 Portainer简介 三、购买云耀云服务器L实例3.1 登录…...

编程日记 2023/9/6 15:15:56

C++并发编程：构建线程安全队列（第一部分：粗粒度锁）

C并发编程&#xff1a;构建线程安全队列&#xff08;第一部分&#xff1a;粗粒度锁&#xff09; 引言 在多线程编程中&#xff0c;线程之间的数据共享和通信是一个非常重要的问题。在这篇博客中&#xff0c;我们将讨论如何用C实现一个基础但非常实用的线程安全队列。这个队列…...

编程日记 2023/9/6 15:14:55

C++设计模式-更新中

单例模式 这个类实现了单例模式。单例模式是一种设计模式&#xff0c;旨在确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取该实例。 在 ConnectionManager 类中&#xff0c;它通过以下方式实现了单例模式&#xff1a; 构造函数 ConnectionManager() 被声明为…...

编程日记 2023/9/6 15:13:54

Hydra工具的使用

目录 Hydra初识 Hydra使用 hydra破解mysql 前言 不固定用户名密码爆破 hydra破解ssh 以用户名为密码登录 hydra破解rdp 将爆破密码的结果输出到文件中 Hydra初识 前言&#xff1a; hydra是一款开源的暴力破解工具&#xff0c;支持多种服务破解原理&#xff1a;使用户…...

编程日记 2023/9/6 15:12:53

Pytorch学习：卷积神经网络—nn.Conv2d、nn.MaxPool2d、nn.ReLU、nn.Linear和nn.Dropout

文章目录 1. torch.nn.Conv2d2. torch.nn.MaxPool2d3. torch.nn.ReLU4. torch.nn.Linear5. torch.nn.Dropout 卷积神经网络详解&#xff1a;csdn链接 其中包括对卷积操作中卷积核的计算、填充、步幅以及最大值池化的操作。 1. torch.nn.Conv2d 对由多个输入平面组成的输入信号…...

编程日记 2023/9/6 15:11:51

水果库存系统(SSM+Thymeleaf版)

不为失败找理由&#xff0c;只为成功找方法。所有的不甘&#xff0c;因为还心存梦想&#xff0c;所以在你放弃之前&#xff0c;好好拼一把&#xff0c;只怕心老&#xff0c;不怕路长。 文章目录 一、前言二、系统架构与需求分析1、技术栈1.1 后端1.2 前端 2、需求分析 三、设计…...

编程日记 2023/9/6 15:10:51

如何在VueJS应用程序中设置Toast通知

通知是开发者提升应用程序互动性和改善用户体验的强大工具。通过利用通知&#xff0c;开发者可以在用户与应用程序互动的同时&#xff0c;有效地向用户传达重要事件。 通知在应用程序中起着至关重要的作用&#xff0c;可以及时通知用户有关各种操作和事件的信息。它们可以用于通…...

编程日记 2023/9/6 15:09:50

css让元素保持等比例宽高

使用新属性 aspect-ratio: 16/9; 代码示例 <style>div {width: 60%;/* 等比例宽高 */aspect-ratio: 16/9;background-color: red;margin: auto;}</style> </head><body><div></div> </body>示例 aspect-ratio兼容性...

编程日记 2023/9/6 15:08:49

骨传导和入耳式哪个危害大一点？入耳式和骨传导哪种好？

骨传导和入耳式这两种耳机虽然都存在一定的危害&#xff0c;但是入耳式耳机对人体的危害要更大一点。 入耳式耳机直接塞进耳朵这种佩戴方式&#xff0c;会阻塞外部声音的进入&#xff0c;长时间使用可能会导致耳道感染&#xff0c;还可能对听力造成损伤&#xff0c;而骨传导耳…...

编程日记 2023/9/6 15:07:48

介绍OpenCV

OpenCV是一个开源计算机视觉库&#xff0c;可用于各种任务&#xff0c;如物体识别、人脸识别、运动跟踪、图像处理和视频处理等。它最初由英特尔公司开发&#xff0c;目前由跨学科开发人员社区维护和支持。OpenCV可以在多个平台上运行&#xff0c;包括Windows、Linux、Android和…...

编程日记 2023/9/6 15:06:47

Android中的view绘制流程，简单理解

简单理解 Android中的View类代表用户界面中基本的构建块。一个View在屏幕中占据一个矩形区域、并且负责绘制和事件处理。View是所有widgets的基础类&#xff0c;widgets是我们通常用于创建和用户交互的组件&#xff0c;比如按钮、文本输入框等等。子类ViewGroup是所有布局&…...

编程日记 2023/9/6 15:05:45

商城开发：店铺管理系统应具备哪些功能？

电子商务的迅猛发展&#xff0c;越来越多的企业选择在线商城作为业务拓展的重要渠道。而要实现一个成功的在线商城&#xff0c;一个强大而高效的店铺管理系统是不可或缺的。店铺管理系统作为商城的核心管理工具&#xff0c;应具备一系列功能&#xff0c;以提供卓越的用户体验和…...

编程日记 2023/9/6 15:04:43

小白学go基础04-命名惯例对标识符进行命名

计算机科学中只有两件难事&#xff1a;缓存失效和命名。 命名是编程语言的要求&#xff0c;但是好的命名却是为了提高程序的可读性和可维护性。好的命名是什么样子的呢&#xff1f;Go语言的贡献者和布道师Dave Cheney给出了一个说法&#xff1a;“一个好笑话&#xff0c;如果你…...

编程日记 2023/9/6 15:03:41

使用iCloud和Shortcuts实现跨设备同步与自动化数据采集

在如今的数字时代&#xff0c;跨设备同步和自动化数据采集对于提高工作效率和便利性至关重要。苹果的iCloud和Shortcuts App为我们提供了强大的工具&#xff0c;可以实现跨设备同步和自动化数据采集的功能。本文将详细介绍如何利用iCloud和Shortcuts App实现这些功能&#xff0…...

编程日记 2023/9/6 15:01:38

Spring框架-基于STOMP使用Websocket

文章目录 前言一、范例演示1.注解方式2.XML方式二、可能出现错误错误： WebSocket代理中断错误： 缺少EventExecutor类错误： 缺少Publisher类错误： 缺少Scheduler类错误： WebSocket调用失败总结前言 Spring框架提供了多种WebSock消息机制，不仅包含了模拟SockJS，还提供了基…...

编程日记 2023/9/6 15:00:37

kafka-- 安装kafka manager及简单使用

一 、安装kafka manager 管控台&#xff1a; # 安装kafka manager 管控台&#xff1a; ## 上传 cd /usr/local/software ## 解压 unzip kafka-manager-2.0.0.2.zip -d /usr/local/ cd /usr/local/kafka-manager-2.0.0.2/conf vim /usr/local/kafka-manager-2.0.0.2/conf/appl…...

编程日记 2023/9/6 14:59:36

深圳-海岸城购物中心数据分析

做数据分析的时候&#xff0c;如果要对商场进行分析&#xff0c;可以从这些数据纬度进行分析&#xff0c;如下图所示&#xff1a; 截图来源于数位观察&#xff1a;https://www.swguancha.com/...

编程日记 2023/9/6 14:58:35

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/12/1 16:40:20

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/10/5 6:41:51

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/12/2 14:16:41

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/12/5 2:47:36

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/12/3 23:08:18

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

编程新知 2025/9/13 16:14:04

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

编程新知 2025/9/22 13:00:25

云安全与网络安全：核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

编程新知 2025/12/4 19:40:06

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

编程新知 2025/11/28 6:23:40