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

Posted on 2021-03-29 17:00:00 In JavaScript

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

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

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

可以使用标点符号。

<!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>

效果：

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