分享一个数字转换大小写的代码
只要把下面代码保存为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)》许可协议授权。版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!