css 自动打字效果的实现
Posted 知其黑、受其白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 自动打字效果的实现相关的知识，希望对你有一定的参考价值。
阅读目录
最终效果
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS文件的引入，在前面说了-->
<link rel="stylesheet" href="index.css" />
<title>自动打字效果的实现</title>
</head>
<body>
<h1 id="text">开始打字</h1>
<div>
<label for="speed">设置速度:</label>
<input type="number" name="speed" id="speed" value="1" min="1" max="20" step="1">
</div>
<!-- JS文件的引入，在前面已经说了，这个也可以放在<head>标签里-->
<script src="index.js"></script>
</body>
</html>
index.js
const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text =
'毛泽东的名作《沁园春·雪》,北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。'
let idx = 1
let speed = 100 / speedEl.value
writeText()
function writeText()
textEl.innerText = text.slice(0, idx)
idx++
if (idx > text.length)
idx = 1
setTimeout(writeText, speed)
speedEl.addEventListener('input', (e) => speed = 100 / e.target.value)
index.css
*
box-sizing: border-box;
body
background-color:#00a6bc;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
h1margin-left:50px;margin-right:50px;
#text
color:#fff;
div
position: absolute;
bottom: 20px;
font-size: 18px;
background-color: #fff;
opacity:0.8;
input
width: 50px;
padding: 5px;
font-size: 18px;
background-color: #fafafa;
border: none;
text-align: center;
input:focus
outline: none;
以上是关于css 自动打字效果的实现的主要内容，如果未能解决你的问题，请参考以下文章