【娱乐项目】基于cnchar库与JavaScript的汉字查询工具

Demo介绍

  • 利用了 cnchar 库来进行汉字相关的信息查询,并展示了汉字的拼音、笔画数、笔画顺序、笔画动画等信息
  • 用户输入一个汉字后,点击查询按钮,页面会展示该汉字的拼音、笔画数、笔画顺序,并绘制相应的笔画动画和测试图案

cnchar 库

cnchar 是一个用于处理汉字的 JavaScript 库,主要功能包括拼音查询、笔画数查询、笔画顺序、汉字书写动画等。这个库特别适用于中文学习和汉字处理,能够帮助开发者和学习者更好地理解和掌握汉字

主要功能:

  • 拼音查询: cnchar 可以为输入的汉字提供拼音查询,包括带音调和不带音调的拼音。
  • 笔画数查询: 该库可以返回汉字的笔画数,这对学习书写汉字的学生非常有帮助。
  • 笔画顺序: cnchar 可以展示汉字的正确笔画顺序,有助于用户学习如何正确书写汉字。它还可以提供笔画的图形展示(通过动画或普通笔画顺序的绘制)。
  • 汉字书写动画: 该库支持通过动画形式展示汉字的笔画顺序,让用户能够直观地理解每个字的书写流程。这对汉字初学者尤其有用。
  • 汉字绘制功能: 通过 cnchar.draw() 方法,可以绘制汉字的笔画,不仅可以绘制笔画顺序,还可以绘制练习用的汉字图案。
  • 汉字测试: cnchar 还提供了练习功能,用户可以通过绘制和测试图形来练习书写汉字。

使用方式:

  1. 网页调用:
    <script src="https://cdn.jsdelivr.net/npm/cnchar"></script>
  2. npm 导入:
    npm install cnchar
    import cnchar from 'cnchar';

HTML代码

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <title>汉字查询工具</title>
    <style>
        .result {
            margin-top: 20px;
        }
    </style>
 
    <script src="js/cnchar.min.js"></script>
    <script src="js/cnchar.order.min.js"></script>
    <script src="js/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>
</body>
</html>

JavaScript 代码

【引入库】

  1. cnchar.min.js:这是 cnchar 的核心库,提供了查询汉字拼音、笔画数等功能
  2. cnchar.order.min.js:用于获取汉字的笔画顺序
  3. cnchar.draw.min.js:提供绘制汉字笔顺动画和测试图案的功能。
  1. 查询汉字信息
  • spell():获取输入汉字的拼音
  • stroke():获取输入汉字的笔画数
  • cnchar.stroke():获取输入汉字的笔画顺序,返回一个字符串,表示汉字的笔画顺序
javascript 复制代码
function queryChineseInfo(chineseChar) {
    const pinyin = chineseChar.spell(); // 获取拼音
    const strokeCount = chineseChar.stroke(); // 获取笔画数
    const strokeOrder = cnchar.stroke(chineseChar, 'order', 'shape'); // 获取笔画顺序
}
  1. 更新页面的查询结果

将获取到的拼音、笔画数和笔画顺序显示在页面上相应的 div 元素中

javascript 复制代码
document.getElementById('pinyin-result').innerText = '拼音: ' + pinyin;
document.getElementById('stroke-count-result').innerText = '笔画数: ' + strokeCount;
document.getElementById('stroke-order-result').innerText = '笔画顺序: ' + strokeOrder;
  1. 绘制汉字的笔顺动画
  • cnchar.draw():用于绘制汉字的笔画
  • type: cnchar.draw.TYPE.STROKE:绘制笔画
  • type: cnchar.draw.TYPE.ANIMATION:绘制带动画效果的笔画
  • loopAnimate: true:设置动画循环播放
javascript 复制代码
cnchar.draw(chineseChar, {
    el: '#drawStroke',
    type: cnchar.draw.TYPE.STROKE,
    animation: {
        loopAnimate: true
    }
});
  1. 清除之前的查询结果
javascript 复制代码
function handleInput() {
    document.getElementById('pinyin-result').innerText = '拼音:';
    document.getElementById('stroke-count-result').innerText = '笔画数:';
    document.getElementById('stroke-order-result').innerText = '笔画顺序:';
}
  1. 按钮点击事件
javascript 复制代码
document.getElementById('query-btn').addEventListener('click', function () {
    const inputField = document.getElementById('chinese-input');
    const chineseChar = inputField.value;
    if (chineseChar) {
        queryChineseInfo(chineseChar);
    } else {
        alert('请输入汉字进行查询');
    }
});

完整代码

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <title>汉字查询工具</title>
    <style>
        .result {
            margin-top: 20px;
        }
    </style>
 
    <script src="js/cnchar.min.js"></script>
    <script src="js/cnchar.order.min.js"></script>
    <script src="js/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>
相关推荐
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
孤水寒月6 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
海的诗篇_7 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
鹏程7 小时前
局域网下五子棋,html+node.js实现
node.js·html
小诸葛的博客9 小时前
gin如何返回html
前端·html·gin
islandzzzz9 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
轻语呢喃12 小时前
Cookie详解:从原理到实战,彻底搞懂用户身份识别机制
javascript·http·html
小宁爱Python14 小时前
FastAPI+Sqlite+HTML的登录注册与文件上传系统:完整实现指南
sqlite·html·fastapi
网络点点滴16 小时前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
Rubin9316 小时前
浏览器一帧做些什么?
html