汉字查询工具
[*]前言
业余制作
[*]运行环境浏览器
复制，保存为html文件，打开就可以用了
[*]使用技术
主要使用了js
具体使用的cnchar 一款功能全面、多端支持的汉字拼音笔画 js 库
cnchar使用说明
[*]源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>汉字查询工具</title>
<style>
.result {
margin-top: 20px;
}
</style>
<script src="https://fastly.jsdelivr.net/npm/cnchar/cnchar.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/cnchar-order/cnchar.order.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/cnchar-draw/cnchar.draw.min.js"></script>
</head>
<body>
<h1>汉字查询工具</h1>
<input type="text" id="chinese-input" placeholder="请输入汉字" oninput="handleInput()">
<button id="query-btn">查询</button>
<div class="result" id="pinyin-result">拼音:</div>
<div class="result" id="stroke-count-result">笔画数:</div>
<div class="result" id="stroke-order-result">笔画顺序:</div>
<div class="result">笔画:</div>
<div id='drawStroke'></div>
<div class="result">笔画-动画:</div>
<div id='drawAnimation'></div>
<div class="result">笔画-正常:</div>
<div id='drawNormal'></div>
<div class="result">练一练:</div>
<div id='drawTest'></div>
<script>
// 使用 cnchar 库查询汉字信息
function queryChineseInfo(chineseChar) {
const pinyin = chineseChar.spell(); // 获取拼音
const strokeCount = chineseChar.stroke(); // 获取笔画数
const strokeOrder = cnchar.stroke(chineseChar, 'order', 'shape'); // 获取笔画顺序
document.getElementById('pinyin-result').innerText = '拼音: ' + pinyin;
document.getElementById('stroke-count-result').innerText = '笔画数: ' + strokeCount;
document.getElementById('stroke-order-result').innerText = '笔画顺序: ' + strokeOrder;
// 绘制汉字的笔顺动画
cnchar.draw(chineseChar, {
el: '#drawStroke',
type: cnchar.draw.TYPE.STROKE,
animation: {
loopAnimate: true
}
});
// 绘制汉字的笔顺动画
cnchar.draw(chineseChar, {
el: '#drawAnimation',
type: cnchar.draw.TYPE.ANIMATION,
animation: {
loopAnimate: true
}
});
// 绘制汉字的笔顺正常
cnchar.draw(chineseChar, {
el: '#drawNormal'
})
// 绘制汉字的测试图案
cnchar.draw(chineseChar, {
el: '#drawTest',
type: cnchar.draw.TYPE.TEST
});
}
// 监听查询按钮的点击事件
document.getElementById('query-btn').addEventListener('click', function () {
const inputField = document.getElementById('chinese-input');
const chineseChar = inputField.value;
if (chineseChar) {
queryChineseInfo(chineseChar);
} else {
alert('请输入汉字进行查询');
}
});
// 监听输入框的输入事件，用于清除之前的查询结果
function handleInput() {
document.getElementById('pinyin-result').innerText = '拼音:';
document.getElementById('stroke-count-result').innerText = '笔画数:';
document.getElementById('stroke-order-result').innerText = '笔画顺序:';
}
</script>
</body>
</html>
[*]截图
[*]制作好了的html文件
cooltnt 发表于 2024-7-15 13:32
已经搞定！
参看官网： https://github.com/theajack/cnchar
给你点个赞，能动手的都是大神 chenmi2017 发表于 2024-7-11 15:52
html更好把，有浏览器就行，手机、电脑、平板、甚至电视都可以
<script src="https://fastly.jsdelivr.net/npm/cnchar/cnchar.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/cnchar-order/cnchar.order.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/cnchar-draw/cnchar.draw.min.js"></script>
你这JS文件都是在线的不会用一段时间打不开了吧一块放到下载包里可以么 这个不错，测试了一下，非常喜欢！ 工具真很好，值得收藏 汉字学习的好工具 收藏一波，自己用不到，但小朋友是可以用得到的 可以给小朋友用 纠正笔顺很好的工具。 说实话，都几十年了，写字都没把笔顺搞明白。 感谢大佬分享！ 试了，不错，谢谢分享