我們經(jīng)常希望一段文本中的字符逐個(gè)顯示，模擬出一種打字的效果署辉。類似于終端命令行的感覺。
用JS去實(shí)現(xiàn)：
html：
<span class="text"></span>
<i class="cursor" style="display: none; border-right:2px solid #fff;"></i>
js代碼：
const $ = attr => document.querySelector(attr);
const textDom = $('.text');
const cursorDom = $('.cursor');
const input = (text) => {
const textArr = text.split('');
let index = 0;
const timer = setInterval(() => {
const showText = textArr.slice(0, index).join('');
textDom.innerHTML = showText;
index++;
if (index > textArr.length) clearInterval(timer);
}, 100);
setInterval(() => {
if (cursorDom.style.display === 'none') {
cursorDom.style.display = 'inline';
} else {
cursorDom.style.display = 'none';
}
}, 500);
}
input('The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.');
用CSS3去實(shí)現(xiàn)：
JS實(shí)現(xiàn)給人的感覺又臭又長哭尝，那能不能用CSS去實(shí)現(xiàn)呢？
html：
<h1>The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.</h1>
@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-right-color: transparent; }
}
h1 {
font: bold 200% Consolas, Monaco, monospace;
width: 108ch;
white-space: nowrap;
overflow: hidden;
border-right: .05em solid;
animation: typing 10.8s steps(108),
caret 1s steps(1) infinite;
}
字符串長度是108;
總結(jié)：
js實(shí)現(xiàn)不用考慮兼容性材鹦，CSS3實(shí)現(xiàn)的需要考慮兼容性，還要兼顧字符串的長度and寬度且不能換行==桶唐，不能換行，不過使用起來似乎更簡單一些尤泽，具體的取舍還是看個(gè)人習(xí)慣。
補(bǔ)充:
以前看某公司的主頁有這個(gè)打字動(dòng)畫的效果坯约，今天看發(fā)現(xiàn)有個(gè)代碼高亮的效果熊咽，于是優(yōu)化了代碼：
//...
const timer = setInterval(() => {
const showText = textArr.slice(0, index).join('');
textDom.innerHTML = showText;
let current = text.substr(index, 1);
if (current === '<') {
index = text.indexOf('>', index) + 1;
}
else {
index++;
}
if (index > textArr.length) clearInterval(timer);
}, 100);
//...
input('<span>The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is </span><span style="color: #415caa">the successor of the ZGMF-X10A Freedom.</span>');
效果似乎還是不一樣闹丐，我要的效果應(yīng)該是輸入結(jié)束的時(shí)候才高亮，我先看看妇智，實(shí)現(xiàn)了再補(bǔ)充...
繼續(xù)補(bǔ)充：
看來只能祭出強(qiáng)無敵的正則匹配了==
//...
const timer = setInterval(() => {
const showText = textArr.slice(0, index).join('').replace(/\<span\>([\s\S]*)\<\/span\>/ig, '\<span style="color: #415caa"\>$1\<\/span\>');
textDom.innerHTML = showText;
let current = text.substr(index, 1);
if (current === '<') {
index = text.indexOf('>', index) + 1;
}
else {
index++;
}
if (index > textArr.length) clearInterval(timer);
}, 100);
//...
input('The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is <span>the successor of the ZGMF-X10A Freedom.</span>');
完成
預(yù)覽效果：demo
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>自動(dòng)打字</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: #000;
color: white;
}
@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-right-color: transparent; }
}
h1 {
font: bold 200% Consolas, Monaco, monospace;
width: 108ch;
white-space: nowrap;
overflow: hidden;
border-right: .05em solid;
animation: typing 10.8s steps(108),
caret 1s steps(1) infinite;
}
</style>
</head>
<body>
<span>>>></span>
<span class="text"></span>
<i class="cursor" style="display: none; border-right:2px solid #fff;"></i>
<h1>The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.</h1>
<script>
const $ = attr => document.querySelector(attr);
const textDom = $('.text');
const cursorDom = $('.cursor');
const input = (text) => {
const textArr = text.split('');
let index = 0;
const timer = setInterval(() => {
const showText = textArr.slice(0, index).join('').replace(/\<span\>([\s\S]*)\<\/span\>/ig, '\<span style="color: #415caa"\>$1\<\/span\>');
textDom.innerHTML = showText;
var current = text.substr(index, 1);
if (current === '<') {
index = text.indexOf('>', index) + 1;
}
else {
index++;
}
if (index > textArr.length) clearInterval(timer);
}, 100);
setInterval(() => {
if (cursorDom.style.display === 'none') {
cursorDom.style.display = 'inline';
} else {
cursorDom.style.display = 'none';
}
}, 500);
}
input('The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is <span>the successor</span> of the ZGMF-X10A Freedom.');
</script>
</body>
</html>
