统计
  • 建站日期:2021-03-10
  • 文章总数:386 篇
  • 评论总数:415 条
  • 分类总数:9 个
  • 最后更新:10月20日
文章 未分类

分享一个数字转换大小写的代码

创新博客
首页 未分类 正文


分享一个数字转换大小写的代码
-创新博客-专注于资源分享的blog
-第1
张图片


分享一个数字转换大小写的代码
-创新博客-专注于资源分享的blog
-第2
张图片****

分享一个数字转换大小写的代码

只要把下面代码保存为html就行了

<!DOCTYPE html>
<html>
<head>
    <title>数字大小写转换</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background-color: #f7f7f7;
        }

        .container {
            max-width: 500px;
            margin: 80px auto;
            background-color: #fff;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 40px;
            text-align: center;
        }

        h2 {
            margin: 0 0 20px;
            color: #333;
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-size: 16px;
            color: #666;
            text-align: left;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 20px;
            outline: none;
        }

        button {
            background-color: #369;
            border: none;
            color: #fff;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #257;
        }

        textarea {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 20px;
            resize: none;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>数字大小写转换</h2>
        <form>
            <label for="input_num">请输入一个阿拉伯数字:</label>
            <input type="text" id="input_num" placeholder="请输入数字">
            <label for="output">转换结果:</label>
            <textarea id="output" rows="5" cols="50" disabled></textarea>
        </form>
    </div>

    <script>
        function convert() {
            var num = document.getElementById("input_num").value;
            var words = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
            var units = ["", "拾", "佰", "仟", "万", "亿"];

            var str = "";
            for (var i = 0; i < num.length; i++) {
                var digit = parseInt(num.charAt(i));
                var idx = num.length - i - 1;
                var unit = units[idx % 6];
                if (digit != 0) {
                    str += words[digit] + unit;
                } else if (idx % 6 == 0 && str.charAt(str.length - 1) != units[4]) {
                    str += unit;
                }
            }
            document.getElementById("output").value = str;
        }

        // 实现输入时自动输出
        document.getElementById("input_num").addEventListener("input", function() {
            convert();
        });
    </script>
</body>
</html>

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

这篇文章最后更新于2023-5-14,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
扫码进群源码-完整可运营
« 上一篇
宝塔登陆信息忘记了怎么办?不要慌很简单我告诉你
下一篇 »
为了防止灌水评论,登录后即可评论!

HI ! 请登录
注册会员,享受下载全站资源特权。

最新文章

热门文章