汉字查询工具

chenmi2017 · 发表于 2024-7-10 22:26

前言

业余制作

运行环境浏览器

复制，保存为html文件，打开就可以用了

使用技术

主要使用了js
具体使用的cnchar 一款功能全面、多端支持的汉字拼音笔画 js 库
cnchar使用说明

源码

[HTML] 纯文本查看 复制代码

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

中文生成笔画.zip (1.17 KB, 下载次数: 238)

chenmi2017 · 发表于 2024-7-15 21:29

cooltnt 发表于 2024-7-15 13:32
已经搞定！

参看官网： https://github.com/theajack/cnchar

给你点个赞，能动手的都是大神

skzhaixing · 发表于 2024-7-11 16:08

chenmi2017 发表于 2024-7-11 15:52
html更好把，有浏览器就行，手机、电脑、平板、甚至电视都可以

开创者 · 发表于 2024-7-11 05:41

这个不错，测试了一下，非常喜欢！

czwuyang · 发表于 2024-7-11 06:46

工具真很好，值得收藏

52soft · 发表于 2024-7-11 07:13

汉字学习的好工具

chenxingfeng · 发表于 2024-7-11 07:57

收藏一波，自己用不到，但小朋友是可以用得到的

long88888888 · 发表于 2024-7-11 07:58

可以给小朋友用

wuwei227 · 发表于 2024-7-11 08:08

纠正笔顺很好的工具。

Wapj_Wolf · 发表于 2024-7-11 08:15

说实话，都几十年了，写字都没把笔顺搞明白。

HNMR · 发表于 2024-7-11 08:15

感谢大佬分享！

xgq8686 · 发表于 2024-7-11 08:34

试了，不错，谢谢分享

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] 汉字查询工具

免费评分

本帖被以下淘专辑推荐: