当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/weixin_48348920/article/details/144138922 2025/1/17 3:47:42

Demo介绍

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

cnchar 库

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

主要功能：

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

使用方式：

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

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 代码

【引入库】

cnchar.min.js：这是 cnchar 的核心库，提供了查询汉字拼音、笔画数等功能
cnchar.order.min.js：用于获取汉字的笔画顺序
cnchar.draw.min.js：提供绘制汉字笔顺动画和测试图案的功能。

查询汉字信息

spell（）：获取输入汉字的拼音
stroke（）：获取输入汉字的笔画数
cnchar.stroke（）：获取输入汉字的笔画顺序，返回一个字符串，表示汉字的笔画顺序

function queryChineseInfo(chineseChar) {const pinyin = chineseChar.spell(); // 获取拼音const strokeCount = chineseChar.stroke(); // 获取笔画数const strokeOrder = cnchar.stroke(chineseChar, 'order', 'shape'); // 获取笔画顺序
}

更新页面的查询结果

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

document.getElementById('pinyin-result').innerText = '拼音: ' + pinyin;
document.getElementById('stroke-count-result').innerText = '笔画数: ' + strokeCount;
document.getElementById('stroke-order-result').innerText = '笔画顺序: ' + strokeOrder;

绘制汉字的笔顺动画

cnchar.draw（）：用于绘制汉字的笔画
type: cnchar.draw.TYPE.STROKE：绘制笔画
type: cnchar.draw.TYPE.ANIMATION：绘制带动画效果的笔画
loopAnimate: true：设置动画循环播放

cnchar.draw(chineseChar, {el: '#drawStroke',type: cnchar.draw.TYPE.STROKE,animation: {loopAnimate: true}
});

清除之前的查询结果

function handleInput() {document.getElementById('pinyin-result').innerText = '拼音:';document.getElementById('stroke-count-result').innerText = '笔画数:';document.getElementById('stroke-order-result').innerText = '笔画顺序:';
}

按钮点击事件

document.getElementById('query-btn').addEventListener('click', function () {const inputField = document.getElementById('chinese-input');const chineseChar = inputField.value;if (chineseChar) {queryChineseInfo(chineseChar);} else {alert('请输入汉字进行查询');}
});

完整代码

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

在这里插入图片描述

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

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

编程日记 2024/11/30 17:44:16

泷羽sec-蓝队基础之网络七层杀伤链（下）学习笔记

声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...

编程日记 2024/11/30 17:43:15

FPGA 开发工程师

目录一、FPGA 开发工程师的薪资待遇二、FPGA 开发工程师的工作内容 1. 负责嵌入式 FPGA 方案设计，包括仿真、软件编写和调试等工作。 2. 使用工具软件建立 FPGA 综合工程，编写综合策略和时序约束。 3. 进行 FPGA 设计的优化与程序维护&#xff0c…...

编程日记 2024/11/30 17:42:13

【Leetcode 每日一题】3250. 单调数组对的数目 I

问题背景给你一个长度为 n n n 的正整数数组 n u m s nums nums。如果两个非负整数数组 ( a r r 1 , a r r 2 ) (arr_1, arr_2) (arr1,arr2) 满足以下条件，我们称它们是单调数组对： 两个数组的长度都是 n n n。 a r r 1 arr_1 arr1 是…...

编程日记 2024/11/30 17:40:11

较类中的方法和属性比较

在 Python 中，类中有以下几种常见的方法和属性，它们的作用和用法有所不同。以下是详细比较： --- ### **1. 实例方法** - **定义**：使用 def 定义，第一个参数是 self，表示实例对象本身。 - **作用**&#…...

编程日记 2024/11/30 17:39:10

nVisual可视化资源管理工具

nVisual主要功能支持自定义层次化的场景结构与物理世界结构一致，从全国到区域、从室外到室内、从机房到设备。支持自定义多种空间场景支持图片、CAD、GIS、3D等多种可视化场景搭建。丰富的模型库支持图标、机柜、设备、线缆等多种资源对象创建。资源可…...

编程日记 2024/11/30 17:36:06

自动类型推导（auto 和 decltype）

一、auto关键字基本概念在 C 11 中引入了auto关键字用于自动类型推导。它可以让编译器根据变量的初始化表达式自动推断出变量的类型。这在处理复杂的类型，如迭代器、lambda 表达式的类型等情况时非常有用。使用示例例如，在迭代器的使用中…...

编程日记 2024/11/30 17:32:03

新型大语言模型的预训练与后训练范式，谷歌的Gemma 2语言模型

前言：大型语言模型（LLMs）的发展历程可以说是非常长，从早期的GPT模型一路走到了今天这些复杂的、公开权重的大型语言模型。最初，LLM的训练过程只关注预训练，但后来逐步扩展到了包括预训练和后训练在内的完整…...

编程日记 2024/11/30 17:27:59

基于投影寻踪博弈论-云模型的滑坡风险评价

目录效果一览基本介绍程序设计参考资料效果一览基本介绍基于投影寻踪博弈论-云模型的滑坡风险评价基于投影寻踪博弈论-云模型的滑坡风险评价是一个复杂而有趣的主题，涉及到博弈论、风险评估和模糊逻辑等领域的交叉应用。这个方法结合了博弈论中的投影寻踪技术…...

编程日记 2024/11/30 17:26:58

WRF-Chem模式安装、环境配置、原理、调试、运行方法；数据准备及相关参数设置方法

大气污染是工农业生产、生活、交通、城市化等方面人为活动的综合结果，同时气象因素是控制大气污染的关键自然因素。大气污染问题既是局部、当地的，也是区域的，甚至是全球的。本地的污染物排放除了对当地造成严重影响外，同时还会在…...

编程日记 2024/11/30 17:25:57

Spring中每次访问数据库都要创建SqlSession吗？

一、SqlSession是什么二、源码分析1）mybatis获取Mapper流程2）Spring创建Mapper接口的代理对象流程3）MapperFactoryBean#getObject调用时机4）SqlSessionTemplate创建流程5）SqlSessionInterceptor拦截逻辑6）开…...

编程日记 2024/11/30 17:23:55

力扣刷题TOP101：6.BM7 链表中环的入口结点

目录： 目的思路复杂度记忆秘诀 python代码目的 {1,2},{3,4,5}, 3 是环入口。思路这个任务是找到带环链表的环入口。可以看作是上一题龟兔赛跑（Floyd 判圈算法）的延续版：乌龟愤愤不平地举报兔子跑得太快，偷偷…...

编程日记 2024/11/30 17:19:50

浅谈telnet和ping

telnet 和 ping 是网络诊断工具，用于测试网络连接性和故障排查，但它们有不同的用途和功能。以下是它们的主要区别： 1. ping 功能描述用途：ping 命令用于测试主机与目标地址（IP或域名）之间的连通性。工作…...

编程日记 2024/11/30 17:17:48

P4-3【应用数组进行程序设计 | 第三节】——知识要点：字符数组

知识要点：字符数组视频： P4-3【应用数组进行程序设计 | 第三节】——知识要点：字符数组目录一、任务分析二、必备知识与理论三、任务实施一、任务分析本任务要求输入一行字符，统计其中的单词数，单词之间用…...

编程日记 2024/11/30 17:16:45

彻底理解微服务配置中心的作用

常见的配置中心有SpringCloudConfig、Apollo、Nacos等，理解它的作用，无非两点，一是配置中心能做什么，不使用配置中心会出现什么问题。作用：配置中心是用来集中管理服务的配置，它是用来提高系统配置的维护…...

编程日记 2024/11/30 17:15:44

SpringBoot开发——详细讲解 Spring Boot 项目中的 POM 配置

文章目录一、POM 文件简介二、单模块项目的 POM 配置1. 创建基本的 Spring Boot 单模块项目2. 重点解析三、多模块项目的 POM 配置1. 多模块项目结构2. 父模块 POM 文件3. 子模块 POM 文件4. 重点解析结语在 Spring Boot 项目中，POM（Project Object Model）文件起着关键作用…...

编程日记 2024/11/30 17:09:38

pyspark实现基于协同过滤的电影推荐系统

最近在学一门大数据的课，课程要求很开放，任意做一个大数据相关的项目即可，不知道为什么我就想到推荐算法，一直到着手要做之前还没有新的更好的来代替，那就这个吧。推荐算法推荐算法的发展由来已久，但和…...

编程日记 2024/11/30 17:08:37

视觉语言模型（VLM）学习笔记

目录应用场景举例 VLM 的总体架构包括： 深度解析：图像编码器的实现图像编码器：视觉 Transformer 注意力机制视觉-语言投影器综合实现训练及注意事项总结应用场景举例基于文本的图像生成或编辑：你输入 “生成一张…...

编程日记 2024/11/30 17:07:36

学习笔记：黑马程序员JavaWeb开发教程(2024.11.29)

10.5 案例-部门管理-新增如何接收来自前端的数据: 接收到json数据之后，利用RequestBody注解，将前端响应回来的json格式的数据封装到实体类中对代码中Controller层的优化发现路径中都有/depts，可以将每个方法对应请求路径中的…...

编程日记 2024/11/30 17:06:34

文档加密怎么做才安全？

公司的文档包含很多机密文件，这些文件不仅关乎公司的核心竞争力，还涉及到客户隐私、商业策略等敏感信息。因此，文档的保管和传递一直是我们工作的重中之重。为了确保机密文件的安全，公司需要制定了一系列严格的保密措施。从文件的…...

编程日记 2024/11/30 17:05:33

使用Setup Factory将C#的程序打包成安装包

一、软件下载 https://download.csdn.net/download/qq_65356682/90042701 可以直接下载二、软件使用打开 1、创建一个新的项目 2、设置如下信息，也可以不设置，最好填非空的、产品名就是你安装成功后生成文件的名称 3、如下文件夹路径就是你C#中ex…...

编程日记 2024/11/30 17:03:31

解决 java -jar 报错：xxx.jar 中没有主清单属性

问题复现在使用 java -jar xxx.jar 命令运行 Java 应用程序时，遇到了以下错误： xxx.jar 中没有主清单属性这个错误表示 JAR 文件缺少必要的启动信息，Java 虚拟机无法找到应用程序的入口点。本文将介绍该错误的原因以及如何通过修改 pom.xm…...

编程日记 2024/11/30 17:01:29

Java HashSet 介绍

怀旧网个人博客网站地址：怀旧网，博客详情：Java HashSet 介绍哈希值介绍创建一个实体类 public class Student {private String name;private int age;public Student(String name, int age) {this.name name;this.age age;} }使用测试…...

编程日记 2024/11/30 16:59:23

2024年几款免费的AI对话工具介绍

目前几款免费的AI对话工具介绍文章目录目前几款免费的AI对话工具介绍一、前言二、AI对话工具介绍1、讯飞星火认知大模型2、百度文心一言3、通义千问4、豆包5、百川大模型6、智谱清言7、月子暗面-KIMI下面是国外的 AI 对话工具： 8、Replika8、Cleverbot9、Coze 三、…...

编程日记 2024/11/30 16:58:21

Gazebo构建模型(含GNSS、IMU、LiDAR、Camera传感器)

将GNSS、IMU、LiDAR、Camera传感器和机器人的base分别放在不同的文件中。这样可以提高模型的可维护性和模块化。下面是一个示例，展示如何将这些部分分别放在不同的.xacro文件中，然后通过导入的方式组合在一起。 1. 创建基础文件：my_robot.xa…...

编程日记 2024/11/30 16:55:18

#Js篇：链式判断运算符 ?.和Null判断运算符？？和逻辑赋值运算符||= = ??=

链式判断运算符 ?. ?.运算符，直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。链判断运算符?.有三种写法。 obj?.prop // 对象属性是否存在 obj?.[expr] // 同上…...

编程日记 2024/11/30 16:54:17

IDEA敲Web前端快捷键

1.html基础格式英文符号TAB键 <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, mini…...

编程日记 2024/11/30 16:53:16

【Vue3】【Naive UI】＜NDropdown＞标签

【Vue3】【Naive UI】标签基本设置自定义渲染交互事件其他属性【VUE3】【Naive UI】＜NCard＞ 标签【VUE3】【Naive UI】＜n-button＞ 标签【VUE3】【Naive UI】＜a＞ 标签【VUE3】【Naive UI】&#xff1c…...

编程日记 2024/11/30 16:51:14

技术总结（四十一）

一、MySQL 索引概述索引的概念：索引就好比一本书的目录，它能帮助 MySQL 快速定位到表中的数据行，而不用全表扫描。通过创建合适的索引，可以大大提高查询的效率。例如，在一个存储了大量员工信息的表中，如果…...

编程日记 2024/11/30 16:50:13

Android布局

一、线性布局属性：orientation vertical horizontal layout_weight【水平均分，width"0dp"】 layout_height layout_width 小动物连连看 1<?xml version"1.0" encoding"utf-8"?>2<LinearLayout xmlns:and…...

编程日记 2024/11/30 16:49:12

空间查看网站/正在播网球比赛直播

汽车芯片赛道的「卷」，或许超出了所有人的预期。对于单纯TOPS算力的比拼，已经翻篇，如何让车企有的用，用得上，还要用得好，已经是新风向。实际上，在汽车智能化刚刚开始的2018年，彼时类…...

编程日记 2025/1/16 23:30:23

b2b网站如何策划/游戏推广平台代理

一、用户 1.1用户注册 1.2用户登录 1.3修改密码 1.4修改资料在用户登陆成功后要跳转到一个页面，暂且叫做用户中心吧。在【UserController】添加[default] action [UserAuthorize]public ActionResult Default(){userRsy new UserRepository();var _user userRsy.…...

编程日记 2025/1/16 20:16:57

海宏集团网站建设/网站排名英文

正题这题其实想想很简单。（据说是老师找我们试水的首先枚举一个关键点，因为我们知道分割这个多边形的最优方案一定是经过关键点的。把顶点和关键点按照极角排序，做这个极角排序的方法，就是如果一个y<0，那么让x-x…...

编程日记 2025/1/16 19:37:24

平乡县网站建设平台/十大免费无代码开发软件

目录规则举例说明并解释： 补充：实例化规律规则 <? extends class>确定上边界，不能使用Set方法 <? super class>确定下边界，不能使用get方法如果你既想要获取数据，又要写入数据，那么…...

编程日记 2025/1/16 19:28:09

澳门公交乘车码怎么弄/企业优化推广

欢迎来到人人都可写代码，大家好，我是杨晓华，今天我们的课程内容是学习语法，熟悉if else条件语句。条件语句主要格式一般有3种：if、if…else、if…else if…else1、if 语法格式:if(表达式){//如果表达式结果为true &…...

编程日记 2025/1/16 18:16:28

Billu_b0x 靶机 write up0x00 环境搭建0x01 信息收集0x02 漏洞挖掘0x03 获取shell0x04 提权0x05 思路总结0x00 环境搭建下载链接 https://download.vulnhub.com/billu/Billu_b0x.zipnat模式 0x01 信息收集 IP探测 netdiscover -i eth0 -r 192.168.157.0/24 端口探测 mass…...

编程日记 2025/1/16 18:04:10

Demo介绍

cnchar 库

HTML代码

JavaScript 代码

完整代码

相关文章：