【娱乐项目】基于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代码

<!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():获取输入汉字的笔画顺序,返回一个字符串,表示汉字的笔画顺序
function queryChineseInfo(chineseChar) {
    const pinyin = chineseChar.spell(); // 获取拼音
    const strokeCount = chineseChar.stroke(); // 获取笔画数
    const strokeOrder = cnchar.stroke(chineseChar, 'order', 'shape'); // 获取笔画顺序
}
  1. 更新页面的查询结果

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

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:设置动画循环播放
cnchar.draw(chineseChar, {
    el: '#drawStroke',
    type: cnchar.draw.TYPE.STROKE,
    animation: {
        loopAnimate: true
    }
});

  1. 清除之前的查询结果
function handleInput() {
    document.getElementById('pinyin-result').innerText = '拼音:';
    document.getElementById('stroke-count-result').innerText = '笔画数:';
    document.getElementById('stroke-order-result').innerText = '笔画顺序:';
}

  1. 按钮点击事件
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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/925737.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

sqoop import报错java.lang.NullPointerException

场景&#xff1a;从TDSQL抽数到hdfs报错&#xff0c;需要指定驱动类名 报错如下&#xff1a; java.lang.RuntimeException: java.lang.NullPointerException Caused by: java.lang.RuntimeException: java.lang.NullPointerException 修改前抽数脚本&#xff1a; #执行sqoo…

小程序 - 个人简历

为了让招聘人员快速地认识自己&#xff0c;可以做一个“个人简历”微信小程序&#xff0c; 展示自己的个人信息。 下面将对“个人简历”微信小程序进行详细讲解。 目录 个人简历 创建图片目录 页面开发 index.wxml index.wxss 功能实现截图 总结 个人简历 创建图片目录…

接口性能优化宝典:解决性能瓶颈的策略与实践

目录 一、直面索引 &#xff08;一&#xff09;索引优化的常见场景 &#xff08;二&#xff09;如何检查索引的使用情况 &#xff08;三&#xff09;如何避免索引失效 &#xff08;四&#xff09;强制选择索引 二、提升 SQL 执行效率 &#xff08;一&#xff09;避免不必…

通过金蝶云星空实现高效仓储管理

金蝶云星空数据集成到旺店通WMS的技术案例分享 在企业日常运营中&#xff0c;库存管理和物流调度是至关重要的环节。为了实现高效的数据流转和业务协同&#xff0c;我们采用了轻易云数据集成平台&#xff0c;将金蝶云星空的数据无缝对接到旺店通WMS。本次案例聚焦于“调拨入库…

数字IC后端实现之PR工具中如何避免出现一倍filler的缝隙?

在数字IC后端实现中&#xff0c;由于有的工艺foundary不提供Filler1&#xff0c;所以PR工具Innovus和ICC2在做标准单元摆放时需要避免出现两个标准单元之间的缝隙间距是Filler1。为了实现这个目的&#xff0c;我们需要给PR工具施加一些特殊的placement constraint&#xff08;典…

【React】全局状态管理(Context, Reducer)

以下为知行小课学习笔记。 概述 Context 跨组件共享状态 在 Next 项目&#xff0c;封装 useContext。 AppContext.tsx "use client";import React, {createContext, Dispatch, ReactNode, SetStateAction, useContext, useMemo, useState} from react;type State …

【游资悟道】-作手新一悟道心法

作手新一经典语录节选&#xff1a; 乔帮主传完整版&#xff1a;做股票5年&#xff0c;炼成18式&#xff0c;成为A股低吸大神&#xff01;从小白到大神&#xff0c;散户炒股的六个过程&#xff0c;不看不知道自己水平 围着主线做&#xff0c;多研究龙头&#xff0c;研究涨停&am…

Sqoop的安装和配置,Sqoop的数据导入导出,MySQL对hdfs数据的操作

sqoop的安装基础是hive和mysql&#xff0c;没有安装好的同学建议去看一看博主的这一篇文章 Hive的部署&#xff0c;远程模式搭建&#xff0c;centos换源&#xff0c;linux上下载mysql。_hive-4.0.1-CSDN博客 好的那么接下来我们开始表演&#xff0c;由于hive是当时在hadoop03上…

医疗废物检测

3809总图像数 数据集分割 训练组80&#xff05; 3030图片 有效集20&#xff05; 779图片 测试集&#xff05; 0图片 标签 预处理 自动定向&#xff1a; 已应用 调整大小&#xff1a; 拉伸至 640x640 增强 未应用任何增强。 注射器 手术刀 输液管 医用手套 医用口罩 血渍 数据集…

音视频流媒体直播/点播系统EasyDSS互联网视频云平台介绍

随着互联网技术的飞速发展&#xff0c;音视频流媒体直播已成为现代社会信息传递与娱乐消费的重要组成部分。在这样的背景下&#xff0c;EasyDSS互联网视频云平台应运而生&#xff0c;它以高效、稳定、便捷的特性&#xff0c;为音视频流媒体直播领域带来了全新的解决方案。 1、产…

4. STM32_定时器

概述 什么是定时器&#xff1a; 定时器核心就是计数器&#xff0c;是使用精准的时基&#xff0c;通过硬件的方式&#xff0c;实现定时功能的器件。 定时器的工作原理&#xff1a; 主频时钟CLK通过PSC进行分频后产生定时器时钟TIM CLK&#xff0c;计数器CNT根据TIM CLK的频率…

BEPUphysicsint定点数3D物理引擎介绍

原文&#xff1a;BEPUphysicsint定点数3D物理引擎介绍 - 哔哩哔哩 帧同步的游戏中如果用物理引擎&#xff0c;为了保证不同设备上的结果一致,需要采用定点数来计算迭代游戏过程中的物理运算。也就是我们通常说的定点数物理引擎(确定性物理引擎)。本系列教程给大家详细的讲解如…

社群赋能电商:小程序 AI 智能名片与 S2B2C 商城系统的整合与突破

摘要&#xff1a;本文聚焦于社群在电商领域日益凸显的关键地位&#xff0c;深入探讨在社群粉丝经济迅猛发展背景下&#xff0c;小程序 AI 智能名片与 S2B2C 商城系统如何与社群深度融合&#xff0c;助力电商突破传统运营局限&#xff0c;挖掘新增长点。通过分析社群对电商的价值…

Android复习代码1-4章

public class RudioButton extends AppCompatActivity {Overrideprotected void onCreate(Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_rudio_button);// 找到RadioGroup和TextView的实例RadioGroup radioGrou…

计算机网络基础(2):网络安全/ 网络通信介质

1. 网络安全威胁 网络安全&#xff1a;目的就是要让网络入侵者进不了网络系统&#xff0c;及时强行攻入网络&#xff0c;也拿不走信息&#xff0c;改不了数据&#xff0c;看不懂信息。 事发后能审查追踪到破坏者&#xff0c;让破坏者跑不掉。 网络威胁来自多方面&#xff1a…

shell(8)until循环以及函数基本创建

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

联想M7400Pro打印机报无法打印02 关闭电源,然后重新打开。故障检修分析

联想M7400Pro打印机无法打印02可能是由于硬件故障、软件问题、通信故障等引起的。 以下是故障的解决方法: 1、关闭打印机(可尝试多次重新启动打印机)。 2、重新放置碳粉盒组件。 3、检查打印机驱动程序是否已正确安装。 4、检查打印机的设置,确保已选择正确的打印模式…

DevOps工程技术价值流:GitLab源码管理与提交流水线实践

在当今快速迭代的软件开发环境中&#xff0c;DevOps&#xff08;开发运维一体化&#xff09;已经成为提升软件交付效率和质量的关键。而GitLab&#xff0c;作为一个全面的开源DevOps平台&#xff0c;不仅提供了强大的版本控制功能&#xff0c;还集成了持续集成/持续交付(CI/CD)…

arcgis for js点击聚合要素查询其包含的所有要素

功能说明 上一篇讲了实现聚合效果, 但是点击聚合效果无法获取到该聚合点包含的所有点信息 这一篇是对如何实现该功能的案例 实现 各属性说明需要自行去官网查阅 官网案例 聚合API 没空说废话了, 加班到12点,得休息了, 直接运行代码看效果就行, 相关重点和注意事项都在代码注…

代码美学2:MATLAB制作渐变色

效果&#xff1a; %代码美学&#xff1a;MATLAB制作渐变色 % 创建一个10x10的矩阵来表示热力图的数据 data reshape(1:100, [10, 10]);% 创建热力图 figure; imagesc(data);% 设置颜色映射为“cool” colormap(cool);% 在热力图上添加边框 axis on; grid on;% 设置热力图的颜色…