0%

HTML JS 输入拼音的打字机效果

我們需要调用一个大佬整理的pinyin-util点击查看)这个JS库来获取各个汉字的汉语拼音。

目前暂时只做了单字输入拼音的打字效果。输入词组的效果需要借助分词及其词典,但是网上看的一个词典都有动辄数十兆,并不适合网页加载。所以暂时不做词组拼音输入。

暂时没做中英文混输,中英文混输可能会出现错位。

可以使用标点符号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/pinyin-util@1.2.3/dist/pinyin-util.min.js"></script>
</head>
<body>

<button onclick="begin()">开始</button>
<p id="test"></p>
<script>
var str = "鄙人一直在竭力简化小花仙高清截图的操作步骤。这次再来尝试使用原生的远程调试来操作指令。";
var x = pinyinUtil.getPinyin(str, ' ').split(' ');
var p = document.getElementById('test');
var z = 0;

function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}

async function begin() {
for (var i in x) {
var pyLength = x[i].length;
for (var y in x[i]) {
p.innerText += x[i][y];
await(sleep(50));
}
await(sleep(50));
p.innerText = p.innerText.substring(0, p.innerText.length - pyLength);
p.innerText += str[i];
await(sleep(50));
}
}

</script>

<p id="demo"></p>

</body>
</html>

效果:
在这里插入图片描述

类似的方式还可以做出五笔打字的打字机效果,只要能弄到所有五笔输入码即可。

Buy me a coffee
No.5972 Alipay

Alipay

推进创文常态化 共建文明襄阳城 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 做文明襄阳人 建文明襄阳城 凝聚文明正能量 筑梦千年古襄阳 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 创建全国文明城市 加快建设汉江流域中心城市 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 讲文明 树新风 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 用微笑融化陌生 用文明美化襄阳 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 争当文明使者 播撒文明新风