vue3项目使用TypeIt打字机

官网: TypeIt | The most versatile JavaScript typewriter effect library on the planet.

下载: npm i typeit 

使用方法:

正常打字

多行打字机

input输入框实现打字机效果

打字机颜色变化

删除,光标移动,最全面的打字机效果

官网最下面还可以输入你想有的打字效果,然后生成代码

录屏2023-10-23 14.27.03

实际炫酷效果展示:

录屏2023-10-23 14.32.44

代码:

<script setup>
import { ref, reactive, onMounted } from 'vue'
onMounted(()=>{new TypeIt("#simpleUsage", {strings: ["This is a simple string.","This is a simple stringasdf","This is a simple stringasdfafs"],speed: 50,waitUntilVisible: true,}).go();
})
import TypeIt from 'typeit'
</script><template><div><span>这里是typewriter</span><p id="simpleUsage"></p></div>
</template><style scoped lang='less'></style>
<template><span ref="text" class="msg"></span>
</template><script setup>
// https://www.typeitjs.com/docs/vanilla/usage/#configuration-basics
// npm install typeit
import { ref, onMounted } from "vue";
import TypeIt from 'typeit'
const text = ref(null)
onMounted(() => {new (TypeIt)(text.value, {strings: ["你好", "欢迎", "测试测试测试"],cursorChar: "<span class='cursorChar'>|<span>",//用于光标的字符。HTML也可以speed: 100,lifeLike: true,// 使打字速度不规则cursor: true,//在字符串末尾显示闪烁的光标breakLines: false,// 控制是将多个字符串打印在彼此之上,还是删除这些字符串并相互替换loop: true,//是否循环}).go()
})
</script><style scoped>
.msg {color: rgb(88, 88, 88);letter-spacing: 2px;
}.msg ::v-deep .cursorChar {display: inline-block;margin-left: 2px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/116869.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【文件操作】Java -操作File对象

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 文件操作 Java - File对象 Java - File对象 Fi…

计算机视觉-数学基础*变换域表示

被研究最多的图像&#xff08;或任何序列数据&#xff09;变换域表示是通过傅 里叶分析 。所谓的傅里叶表示就是使用 正弦函数的线性组合来表示信号。对于一个给定的图像I(n1,n2) &#xff0c;可以用如下方式分解它&#xff08;即逆傅里叶变换&#xff09;&#xff1a; 其中&a…

【lesson14】进程控制之进程等待

文章目录 为什么要有进程等待&#xff1f;如何等待和什么是等待&#xff1f; 为什么要有进程等待&#xff1f; 1.子进程退出&#xff0c;父进程不管子进程&#xff0c;子进程就要处于僵尸状态------会导致内存泄漏 2.父进程创建子进程是要让子进程办事的&#xff0c;那么子进…

【Tensorflow 2.12 简单智能商城商品推荐系统搭建】

Tensorflow 2.12 简单智能商城商品推荐系统搭建 前言架构数据召回排序部署调用结尾 前言 基于 Tensorflow 2.12 搭建一个简单的智能商城商品推荐系统demo~ 主要包含6个部分&#xff0c;首先是简单介绍系统架构&#xff0c;接着是训练数据收集、处理&#xff0c;然后是召回模型、…

“深入探讨Java JUC中的ReentrantLock锁:实现多线程同步与并发控制“

简介 1、从Java5开始&#xff0c;Java提供了一种功能更强大的线程同步机制——通过显式定义同步锁对象来实现同步&#xff0c;在这种机制下&#xff0c;同步锁由Lock对象充当。 2、Lock 提供了比synchronized方法和synchronized代码块更广泛的锁定操作&#xff0c;Lock允许实…

arcgis js api FeatureLayer加载时返回数据带*问题

接着这一问题衍生出来的问题 arcgis的MapServer服务查询出来的结果geometry坐标点带*的问题-CSDN博客 个人感觉像是server版本的问题&#xff0c;具体不清楚&#xff0c;pg数据库里面的shape点集合坐标点的精度是8&#xff0c;但是server服务查出来的默认都十几位。所以存在一…

使用CPR库和Python编写程序

以下是一个使用CPR库和Python编写的爬虫程序&#xff0c;用于爬取。此程序使用了proxy的代码。 import requests from cpr import CPR ​ def get_proxy():url "https://www.duoip.cn/get_proxy"headers {"User-Agent": "Mozilla/5.0 (Windows NT …

如何用.bat文件直接安装jar包

大家应该都知道一个maven引入jar包&#xff0c;如果直接把jar包放到目录&#xff0c;这样是没用的&#xff0c;引入还是会失败 这里我们可以创建一个.bat的windows系统文件&#xff0c;写入pom.xml对应的groupid&#xff0c;artifactId&#xff0c;version pom.xml中进入jar包…

RDB.js:适用于 Node.js 和 Typescript 的终极对象关系映射器

RDB.js 是适用于 Node.js 和 Typescript 的终极对象关系映射器&#xff0c;可与 Postgres、MS SQL、MySQL、Sybase SAP 和 SQLite 等流行数据库无缝集成。无论您是使用 TypeScript 还是 JavaScript&#xff08;包括 CommonJS 和 ECMAScript&#xff09;构建应用程序&#xff0c…

Ceres 使用笔记

文章目录 Part.I IntroductionChap.I 预备知识Chap.II 概念理解 Part.II 简单使用Chap.I Ceres 中主要函数简介Chap.II 一个简单的实例 Reference Part.I Introduction Ceres 1 是由 Google 开发的开源 C 通用非线性优化库&#xff0c;与 g2o 并列为目前视觉 SLAM 中应用最广泛…

springboot+vue开发的视频弹幕网站动漫网站

springbootvue开发的视频弹幕网站动漫网站 演示视频 https://www.bilibili.com/video/BV1MC4y137Qk/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae139b 功能&#xff1a; 前台&#xff1a; 首页&#xff08;猜你喜欢视频推荐&#xff09;、轮播图、分类…

28、Flink 的SQL之DROP 、ALTER 、INSERT 、ANALYZE 语句

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

cookie过大导致request 400 错误研究

问&#xff1a;get请求太长报400的错误&#xff0c;如何解决&#xff1f;生成系统中经常偶现此问题 问&#xff1a;get请求URL的长度是谁限制的&#xff1f; 问&#xff1a;每一个cookie的value的大小还是同域下cookie的个数做的限制&#xff1f; 现象&#xff1a;出现 400 Ba…

【Python · PyTorch】数据基础

数据基础 1. 数据操作1.1 入门1.2 运算符1.3 广播机制1.4 索引和切片1.5 节省内存1.6 转化为其他Python对象 2. 数据预处理2.1 读取数据集2.2 处理缺失值2.3 转换为张量格式 本文介绍了PyTorch数据基础&#xff0c;Python版本3.9.0&#xff0c;代码于Jupyter Lab中运行&#xf…

人工智能之深度学习

1. 引言 时至今日&#xff0c;人们常用的计算机程序几乎都是软件开发人员从零编写的。 比如&#xff0c;现在开发人员要编写一个程序来管理网上商城。 经过思考&#xff0c;开发人员可能提出如下一个解决方案&#xff1a; 首先&#xff0c;用户通过Web浏览器&#xff08;或移动…

Elasticsearch的聚集统计,可以进行各种统计分析

说明&#xff1a; Elasticsearch不仅是一个大数据搜索引擎&#xff0c;也是一个大数据分析引擎。它的聚集(aggregation)统计的REST端点可用于实现与统计分析有关的功能。Elasticsearch提供的聚集分为三大类。 度量聚集(Metric aggregation)&#xff1a;度量聚集可以用于计算搜…

MyBatisPlus的使用【详细】

目录 Mybatis MybatisPlus特性 MybatisPlus的使用 常见注解 TableName TableId TableField MP常见配置 条件查询器Wrapper QueryWrapper UpdateWrapper LambdaQueryWrapper 自定义SQL Service接口 批量添加数据 MP的代码生成 MP静态工具 MP扩展功能之逻辑删除…

C++栈、队列、优先级队列模拟+仿函数

目录 一、栈的模拟和deque容器 1.deque 1.1deque结构 1.2deque优缺点 2.stack模拟 二、队列的模拟 三、priority_queue优先级队列 1.优先级队列模拟 2.添加仿函数 一、栈的模拟和deque容器 在之前&#xff0c;我们学过了C语言版本的栈&#xff0c;可以看这篇文章 栈和…

【刷题篇】笔试真题

文章目录 复数乘法一年中的第几天字符串相加字符串相乘 复数乘法 复数 可以用字符串表示&#xff0c;遵循 “实部虚部i” 的形式&#xff0c;并满足下述条件&#xff1a; 实部 是一个整数&#xff0c;取值范围是 [-100, 100] 虚部 也是一个整数&#xff0c;取值范围是 [-100, 1…

MySQL字段加密方案 安当加密

要通过安当KSP密钥管理系统实现MySQL数据库字段的加密&#xff0c;您可以按照以下步骤进行操作&#xff1a; 安装和配置安当KSP密钥管理系统&#xff1a;首先&#xff0c;您需要安装安当KSP密钥管理系统&#xff0c;并按照说明进行配置。确保您已经正确地设置了密钥管理系统的用…