<!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>
[复制链接]
发表于 2024-7-10 22:26
|
发表于 2024-7-15 21:29
