前端知识案例学习11-前端实现自动打字效果

index.html

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引用有字库站酷高端黑字体 -->
    <link
      href="http://cdn.repository.webfont.com/webfonts/nomal/135621/46969/5e3024eaf629d810708c2ad6.css"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- 定位文本到浏览器中央 -->
    <main>
      <!-- 文字容器，统一由h1控制 -->
      <h1>
        <!-- 使用span显示文字, data-text为Json格式的数组 -->
        <span
          id="text"
          data-text='["我是歌谣", "我是一名前端工程师", "微信公众号前端小歌谣"]'
        ></span>
        <!-- 闪烁的光标 -->
        <span class="mark"></span>
      </h1>
    </main>
 
    <script src="index.js"></script>
  </body>
</html>

css样式

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "huxiaobo-gdh1e91397a5f211c5", "PingFang SC", "Microsoft Yahei",
    sans-serif;
}
 
main {
  background: #2f3542;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
 
h1 {
  color: #f1f2f6;
  font-size: 5em;
  font-weight: 300;
}
 
span.mark {
  border-right: 2px solid white;
  animation: blink 0.6s step-end infinite;
}
 
@keyframes blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
}

js代码

 // 获取显示文字的span元素
const textEl = document.querySelector("#text");
// 获取并解析要展示的文本数组
const texts = JSON.parse(textEl.getAttribute("data-text"));
 
// 当前显示文本数组中的第几个
let index = 0;
// 当前显示第几个字
let charIndex = 0;
// 每个字显示间隔默认是500毫秒
let delta = 500;
 
// 记录动画执行开始时间
let start = null;
// 是否为删除动画
let isDeleting = false;
 
// 动画回调函数
function type(time) {
  window.requestAnimationFrame(type);
  // 初始化开始时间
  if (!start) start = time;
  // 获取时间间隔
  let progress = time - start;
  // 每隔一定的时间，打印出一个新的字符
  if (progress > delta) {
    // 获取完整的字符
    let text = texts[index];
    // 如果是打字效果
    if (!isDeleting) {
      // 给展示文字的span新增一个字符，使用innerHTML来替换，charIndex自增1，然后返回新的字符串子串
      textEl.innerHTML = text.slice(0, ++charIndex);
      // 每个字符打印出来的速度不一样，模仿人工打字的速度
      delta = 500 - Math.random() * 400;
    } else {
      // 如果是删除效果，则把文字一个一个减掉
      textEl.innerHTML = text.slice(0, charIndex--);
    }
    // 把star更新为当前时间，进行下一个周期
    start = time;
 
    // 如果文字已经全部打印完毕
    if (charIndex === text.length) {
      // 下次开始删除文字
      isDeleting = true;
      // 删除文字的间隔为200毫秒
      delta = 200;
      // 额外等待1.2秒后再删除
      start = time + 1200;
    }
 
    // 如果文字删除完毕
    if (charIndex < 0) {
      isDeleting = false;
      // 额外增加200毫秒延迟
      start = time + 200;
      // 把index移动到下一个文本，并且在文本数组元素个数中循环
      index = ++index % texts.length;
    }
  }
}
 
window.requestAnimationFrame(type);

posted @ 2022-11-29 16:09 前端导师歌谣阅读(122) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端知识案例学习13-技能条效果实现

· 前端知识案例学习15-实现3d得旋转

· CSS实现打字机动画效果

· 【GitHub热前端项目50天50项目】--day04--实现自动输入的效果、自动打字

· vue实现打字效果

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

前端知识案例学习11-前端实现自动打字效果

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- 引用有字库站酷高端黑字体 -->
	<link
	href="http://cdn.repository.webfont.com/webfonts/nomal/135621/46969/5e3024eaf629d810708c2ad6.css"
	rel="stylesheet"
	type="text/css"
	/>
	<link rel="stylesheet" href="style.css" />
	<title>Document</title>
	</head>
	<body>
	<!-- 定位文本到浏览器中央 -->
	<main>
	<!-- 文字容器，统一由h1控制 -->
	<h1>
	<!-- 使用span显示文字, data-text为Json格式的数组 -->
	<span
	id="text"
	data-text='["我是歌谣", "我是一名前端工程师", "微信公众号前端小歌谣"]'
	></span>
	<!-- 闪烁的光标 -->
	<span class="mark"></span>
	</h1>
	</main>

	<script src="index.js"></script>
	</body>
	</html>

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "huxiaobo-gdh1e91397a5f211c5", "PingFang SC", "Microsoft Yahei",
	sans-serif;
	}

	main {
	background: #2f3542;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	}

	h1 {
	color: #f1f2f6;
	font-size: 5em;
	font-weight: 300;
	}

	span.mark {
	border-right: 2px solid white;
	animation: blink 0.6s step-end infinite;
	}

	@keyframes blink {
	from,
	to {
	border-color: transparent;
	}
	50% {
	border-color: white;
	}
	}

	// 获取显示文字的span元素
	const textEl = document.querySelector("#text");
	// 获取并解析要展示的文本数组
	const texts = JSON.parse(textEl.getAttribute("data-text"));

	// 当前显示文本数组中的第几个
	let index = 0;
	// 当前显示第几个字
	let charIndex = 0;
	// 每个字显示间隔默认是500毫秒
	let delta = 500;

	// 记录动画执行开始时间
	let start = null;
	// 是否为删除动画
	let isDeleting = false;

	// 动画回调函数
	function type(time) {
	window.requestAnimationFrame(type);
	// 初始化开始时间
	if (!start) start = time;
	// 获取时间间隔
	let progress = time - start;
	// 每隔一定的时间，打印出一个新的字符
	if (progress > delta) {
	// 获取完整的字符
	let text = texts[index];
	// 如果是打字效果
	if (!isDeleting) {
	// 给展示文字的span新增一个字符，使用innerHTML来替换，charIndex自增1，然后返回新的字符串子串
	textEl.innerHTML = text.slice(0, ++charIndex);
	// 每个字符打印出来的速度不一样，模仿人工打字的速度
	delta = 500 - Math.random() * 400;
	} else {
	// 如果是删除效果，则把文字一个一个减掉
	textEl.innerHTML = text.slice(0, charIndex--);
	}
	// 把star更新为当前时间，进行下一个周期
	start = time;

	// 如果文字已经全部打印完毕
	if (charIndex === text.length) {
	// 下次开始删除文字
	isDeleting = true;
	// 删除文字的间隔为200毫秒
	delta = 200;
	// 额外等待1.2秒后再删除
	start = time + 1200;
	}

	// 如果文字删除完毕
	if (charIndex < 0) {
	isDeleting = false;
	// 额外增加200毫秒延迟
	start = time + 200;
	// 把index移动到下一个文本，并且在文本数组元素个数中循环
	index = ++index % texts.length;
	}
	}
	}

	window.requestAnimationFrame(type);

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

前端知识案例学习11-前端实现自动打字效果

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识