JavaScript实现打字机效果

效果图

html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css"></head><body><main><h1><span>A developer platform for building </span><span id="text" data-text='["web","mobile","desktop","game","loT","all your"]'></span><span class="mark"></span><span>apps</span></h1></main><script src="index.js"></script>
</body></html>

css代码

* {margin: 0;padding: 0;box-sizing: border-box;
}main {display: flex;background-color: #2f3542;align-items: center;justify-content: center;height: 100vh;
}h1 {color: #ffffff;font-size: 2rem;font-weight: 500;
}.mark {border-right: 2px solid #ffffff;animation: blink 0.6s step-end infinite;
}@keyframes blink {from,to {border-color: transparent;}50% {border-color: #ffffff;}
}

js代码

const textEl = document.querySelector('#text');
const texts = JSON.parse(textEl.getAttribute('data-text'));let index = 0;
let charIndex = 0;
let delta = 200;let start = null;
let flag = false;function type(time) {window.requestAnimationFrame(type);if (!start) {start = time;}let progress = time - start;if (progress > delta) {let text = texts[index];if (!flag) {textEl.innerHTML = text.slice(0, ++charIndex);// delta = 500 - Math.random() * 400;delta = 200;} else {textEl.innerHTML = text.slice(0, charIndex--);}start = time;if (charIndex === text.length) {flag = true;delta = 200;start = time + 1200;}if (charIndex < 0) {flag = false;start = time + 200;index = ++index % texts.length;}}
}
window.requestAnimationFrame(type);

JavaScript实现打字机效果相关推荐

JavaScript实现打字机效果(链式语法版)
前言在GitHub上也有一个类似的项目,为了练练手,自己也简单的实现了一下与其项目一模一样的特点,目前测试来看效果还好,想是不会有太大BUG 效果 mp4转GIF后变慢了,实际输出没有这么慢代码如 ...
html5 打字机效果,使用JavaScript制作打字机文本效果
我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介.我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式jQuery打字机特效插件和逼真的js打 ...
利用JavaScript分别实现倒计时、跑马灯和打字机效果
倒计时代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
cdn加载插件和npm安装的差别_web开发：打字机效果插件Typed.js
本文同步发表在我的个人博客中: 沧沧凉凉www.cclliang.com 打字机效果是非常酷的文字显示效果,视觉表现极佳,而通过Typed.js可以很简单的在web开发中实现打字机效果. 1. 官网 ...
js计时器+打字机效果demo
计时器在写程序的过程中,经常会用到在某个指定的时间来执行一段代码,或者让一段代码在一个周期内执行.js中常用的计时器有timeout\interval:不是很常用的requestAnimationF ...
如何实现chatgpt的打字机效果
点击↑上方↑蓝色"编了个程"关注我~ 这是Yasin的第 88 篇原创文章打字机效果最近在搭建chat gpt代理的时候,发现自己的配置虽然能够调通接口,返回数据,但是结果是一 ...
php实现打字效果,JS实现的打字机效果示例代码
这篇文章主要介绍了JS实现的打字机效果,结合完整实例形式分析了javascript定时触发自定义函数模拟打字输出效果的相关实现技巧,需要的朋友可以参考下本文实例讲述了JS实现的打字机效果.分享给大家 ...
【实战】用CSS实现文本打字机效果
之前,我们的文章中已经有通过 JS 的方式实现文本打字机的效果了,具体可以看这篇文章: [前端三分钟]利用Javascript实现打字效果在本文中,你将学习如何使用纯CSS实现打字机效果,使网站的文 ...
想实现前端酷炫的打字机效果吗
实现酷炫的打字机效果插件typed.js 前言: 最近在写前端项目的过程中,在逛别人的优质的个人博客的时候,发现一个好玩有趣的东西.看下图,类似在打字的效果,然后又在思考的感觉,感觉整个网页都充满了思 ...
十六、Javascript实现放大镜效果
@Author:Runsen @Date:2020/6/1 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...

JavaScript实现打字机效果

效果图

html代码

css代码

js代码

JavaScript实现打字机效果相关推荐

最新文章

热门文章