该工具旨在帮助用户方便地将人民币金额从小写转换为大写，只需输入金额，点击转换按钮，即可快速获得准确的大写表示。工具界面简洁友好，支持输入各种格式的大写金额，如“1356.78元”。经常报账的小伙伴可以用到，减少手动转换的错误。

点击查看代码 
<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>人民币数字转大写</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background-color: #f5f5f5;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }

        .container {

            background-color: #fff;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

            width: 90%;

            max-width: 400px;

            text-align: center;

        }

        input, button {

            padding: 10px;

            margin-top: 10px;

            width: 100%;

            border: 1px solid #ccc;

            border-radius: 4px;

            box-sizing: border-box; /* 使padding和border包含在width内 */

        }

        button {

            background-color: #28a745;

            color: white;

            border: none;

            cursor: pointer;

        }

        button:hover {

            background-color: #218838;

        }

        #result {

            margin-top: 20px;

            font-size: 1.2em;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>人民币数字转大写</h1>

        <input type="text" id="numberInput" placeholder="请输入十亿以内的数字" maxlength="10" />

        <button onclick="convertToCapital()">转换</button>

        <div id="result"></div>

    </div>

    <script>

        const bigNum = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];

        const bigUnit = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿'];

        function convertToCapital() {

            let input = document.getElementById("numberInput").value.trim();

            let result = "";

            // 分离整数部分和小数部分

            let [integerPart, decimalPart] = input.split(".");

            integerPart = integerPart.replace(/,/g, ""); // 去掉逗号

            decimalPart = decimalPart ? decimalPart.slice(0, 2) : ""; // 只取前两位

            if (parseInt(integerPart) >= 1000000000) {

                result = "超出范围，最大支持十亿。";

            } else {

                // 转换整数部分

                if (parseInt(integerPart) === 0) {

                    result += "零元";

                } else {

                    let zeroCount = 0;

                    let unitIndex = integerPart.length - 1;

                    for (let i = 0; i < integerPart.length; i++) {

                        let digit = integerPart.charAt(i);

                        let pos = unitIndex - i;

                        if (digit !== '0') {

                            if (zeroCount > 0) {

                                result += bigNum[0]; // 添加零

                            }

                            result += bigNum[digit]; // 添加数字

                            if (pos % 4 !== 0) {

                                result += bigUnit[pos % 4]; // 添加单位

                            }

                            zeroCount = 0;

                        } else {

                            zeroCount++;

                        }

                        // 添加万或亿

                        if (pos === 4) {

                            result += bigUnit[4]; // 添加万

                        } else if (pos === 8) {

                            result += bigUnit[8]; // 添加亿

                        }

                    }

                    result += "元"; // 添加元

                }

                // 转换小数部分

                if (decimalPart) {

                    if (decimalPart.length > 0) {

                        result += bigNum[parseInt(decimalPart.charAt(0))] + "角";

                    }

                    if (decimalPart.length > 1) {

                        result += bigNum[parseInt(decimalPart.charAt(1))] + "分";

                    }

                } else {

                    result += "整"; // 没有小数部分时添加整

                }

            }

            document.getElementById("result").innerText = result;

        }

    </script>

</body>

</html>

直接保存html格式就可以使用了。

我自己测试页面可以参考下这个：http://diuta.com/app/rmb.html

给这个小工具具体完善一下，完善后的页面可以看这个案列：http://tool.diuta.com/hexconvert/

在线人民币大小写转换工具html代码的更多相关文章

  1. JS进行人民币大小写转换

    //数字金额大写转换(可以处理整数,小数,负数) function upDigit() { digit=$("#digit").html(); n=digit.replace(/\ ...

  2. web字体格式及几种在线格式转换工具介绍

    原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字 ...

  3. 浅谈print2flash的在线预览转换应用（原创）

    print2flash是一种在线预览转换工具,可以将doc.docx.xls.pdf.ppt等格式的文档转换成flash文件进行预览,因为之前使用的flash2paper只支持32为操作系统,不支持6 ...

  4. C#人民币金额大写转换

    人民币金额大小写转换,三行代码 //完善了一下查询到的方法,支持小数,保留2位小数 public string NumGetStr(double Num) { string[] DX_SZ = { & ...

  5. java 金额的大小写转换类

    /** *金额大小写转换工具类 */ public class MoneyUtil { /** 大写数字 */ private static final String[] NUMBERS = { &q ...

  6. HTML-DEV-ToolLink（常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具，支持在线搜索和Chrome插件。）

    HTML-DEV-ToolLink:https://github.com/easonjim/HTML-DEV-ToolLink 常用的在线字符串编解码.代码压缩.美化.JSON格式化.正则表达式.时间 ...

  7. Unicode编码解码在线转换工具

    // Unicode编码解码在线转换工具 Unicode 是基于通用字符集(Universal Character Set)的标准来发展,并且同时也以书本的形式(The Unicode Standar ...

  8. 免费开源Blazor在线Ico转换工具

    行文目录 功能效果演示 实现说明 2.1 其他图片上传 2.2 核心代码:其他图片转Ico 2.3 转换后的Ico文件下载 总结 1. 功能效果演示 仓库地址:IcoTool 在线演示地址:https ...

  9. Rsa加解密Java、C#、php通用代码 密钥转换工具

    之前发了一篇"TripleDes的加解密Java.C#.php通用代码",后面又有项目用到了Rsa加解密,还是在不同系统之间进行交互,Rsa在不同语言的密钥格式不一样,所以过程中主 ...

  10. es6转es5 在线转换工具

    es6转es5 在线转换工具 Babeljs es6console

随机推荐

  1. Object类--equals方法--java进阶day05

    1.equals方法 2.equals方法的逻辑 如图,我们发现调用equals方法将两个属性一样的变量进行比较时,返回的还是false 为了了解清楚equals方法的逻辑,我们ctrl 鼠标右键点击 ...

  2. 【错误解决】Android APK 方法数量限制

    错误:# Cannot fit requested classes in a single dex file (# methods: 74519 > 65536) 最近开发安卓程序遇到以下错误: ...

  3. 第10章面向对象编程(高级部分)-cnblog

    类变量与类方法 static修饰的成员变量(类变量,静态变量)的特性? 同一个类所有对象共享 类变量是随着类的加载而创建, 所以即使没有创建对象实例也可以访问 ,但是类变量的访问, 必须遵守 相关的访 ...

  4. LazyAdmin打靶笔记

    参考视频:https://www.bilibili.com/video/BV16Tc8eCEKZ/?spm_id_from=333.1387.homepage.video_card.click Nma ...

  5. 在web.xml下配置springmvc的核心控制器

    <!DOCTYPE web-app PUBLIC        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" ...

  6. windows下jdk版本切换(bat)

    1.jdk下载 Oracle官网 https://www.oracle.com/cn/ 资源->下载->Java下载 jdk当前最新版本 jdk22版本 jdk8版本 当前页面向下拉 2. ...

  7. 数据结构之位图（bitmap、RoaringMap）

    参照资料: 1.https://www.bilibili.com/video/BV1u44y1g7Ps(bitmap) 2.https://b23.tv/cQtuFOx (RoaringMap) 3. ...

  8. ORA-24247：网络访问被访问控制列表（ACL）拒绝器

    我在oracle 存储过程中发送http请求, 报错如下: ORA-29273:HTTP请求失败 ORA-06512:在"SYS.UTL HTTP",line 1527 ORA-2 ...

  9. 【HUST】网安｜多媒体数据安全实验｜LSB隐写和DCT域JSTEG+F4+F5隐写及检测

    文章目录 LSB空域隐写 原理 值对现象原理 实验内容 DCT域隐写 JSteg F4 F5 代码仓库:代码.嵌入提取使用的图像.jpeg_tool库.实验报告_Gitee. 实验环境:MATLAB ...

  10. 【Elasticsearch】一文读懂ES向量搜索：原理剖析与技术全景

    大家好,我是大任,今天给大家分享一下Elasticsearch的向量搜索技术 注:本文若未说明ES版本则为7.10,其他版本会特别标记,由于ES版本不同,部分差异较大,具体请以官方文档为准 一.向量搜 ...