-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhexToDec.html
138 lines (118 loc) · 4.4 KB
/
hexToDec.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在线16进制转换</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="icon" type="image/x-icon" href="/convert.ico">
<style>
.custom-margin {
margin-bottom: 5rem;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<h2 class="text-center mb-4">16进制 ➡️ 10进制</h2>
<div class="input-group mb-3">
<input type="text" id="hexInput" class="form-control"
placeholder="请输入16进制数（支持0x和0x0...开头的数）">
</div>
<div class="input-group mb-3">
<input type="text" id="decimalOutput" class="form-control" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="convertHexToDecimalButton">复制数值
</button>
</div>
</div>
<!-- 添加额外的空间 -->
<div class="custom-margin"></div>
<h2 class="text-center mb-4">10进制 ➡️ 16进制</h2>
<div class="input-group mb-3">
<input type="text" id="decInput" class="form-control" placeholder="请输入10进制数">
</div>
<div class="input-group mb-3">
<input type="text" id="hexOutput" class="form-control" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="convertDecimalToHexButton">复制数值
</button>
</div>
</div>
</div>
</div>
</div>
<footer class="footer mt-5 py-3">
<div class="container text-center">
<span class="text-muted">
<a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备2023018763号</a>
</span>
</div>
</footer>
<script>
// 监听输入变化，自动进行转换
document.getElementById('hexInput').addEventListener('input', function () {
convertToDecimal();
});
document.getElementById('decInput').addEventListener('input', function () {
convertToHex();
});
// 在文档加载完成后绑定事件监听器
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('convertHexToDecimalButton').addEventListener('click', copyToClipboard);
document.getElementById('convertDecimalToHexButton').addEventListener('click', copyHexToClipboard);
});
function convertToDecimal() {
let hexValue = document.getElementById('hexInput').value.toLowerCase();
if (hexValue === '') {
document.getElementById('decimalOutput').value = '';
return;
}
if (hexValue.startsWith('0x')) {
hexValue = hexValue.substring(2);
}
// 使用正则表达式去除前导零
hexValue = hexValue.replace(/^0+/, '');
// 如果字符串为空，则置为 "0"
if (hexValue === '') {
hexValue = '0';
}
// 使用正则表达式检查是否为有效的十六进制数
if (!/^[0-9a-f]+$/i.test(hexValue)) {
document.getElementById('decimalOutput').value = "请输入合法的16进制数";
return;
}
document.getElementById('decimalOutput').value = BigInt("0x" + hexValue).toString();
}
function convertToHex() {
let decValue = document.getElementById('decInput').value;
if (decValue === '') {
document.getElementById('hexOutput').value = '';
return;
}
// 使用正则表达式检查是否为有效的10进制数
if (!/^\d+$/.test(decValue)) {
document.getElementById('hexOutput').value = "请输入合法的10进制数";
return;
}
document.getElementById('hexOutput').value = BigInt(decValue).toString(16);
}
function copyToClipboard() {
let outputValue = document.getElementById('decimalOutput').value;
navigator.clipboard.writeText(outputValue)
.catch(err => {
console.error('复制失败: ', err);
});
}
function copyHexToClipboard() {
let outputValue = document.getElementById('hexOutput').value;
navigator.clipboard.writeText(outputValue)
.catch(err => {
console.error('复制失败: ', err);
});
}
</script>
</body>
</html>