我們需要调用一个大佬整理的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>
效果：
类似的方式还可以做出五笔打字的打字机效果，只要能弄到所有五笔输入码即可。
767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
