234 lines
6.9 KiB
HTML
234 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>程序员进制计算器</title>
|
|
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
margin: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.input-section {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box; /* 确保 padding 不会增加元素宽度 */
|
|
}
|
|
|
|
.radio-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.radio-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
button {
|
|
background-color: #4caf50;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #3e8e41;
|
|
}
|
|
|
|
#results {
|
|
margin-top: 20px;
|
|
border-top: 1px solid #ccc;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.history-list {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.history-list li {
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
margin-bottom: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.history-section h2 {
|
|
font-size: 18px;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.history-list li:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>程序员进制计算器</h1>
|
|
|
|
<label for="number-input">请输入数字:</label>
|
|
<input type="text" id="number-input" placeholder="例如: 100" required />
|
|
|
|
<button onclick="convertNumber()">转换</button>
|
|
<div class="radio-group">
|
|
<label
|
|
><input type="radio" name="base" value="10" checked /> 十进制</label
|
|
>
|
|
<label><input type="radio" name="base" value="2" /> 二进制</label>
|
|
<label><input type="radio" name="base" value="8" /> 八进制</label>
|
|
<label><input type="radio" name="base" value="16" /> 十六进制</label>
|
|
</div>
|
|
<div id="results">
|
|
<h2>转换结果</h2>
|
|
<div id="result-section">
|
|
<!-- 计算结果将显示在这里 -->
|
|
</div>
|
|
</div>
|
|
<div class="history-section">
|
|
<h2>历史记录</h2>
|
|
<ul class="history-list" id="history-list">
|
|
<!-- 历史记录将显示在这里 -->
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
const historyList = [];
|
|
|
|
function convertNumber() {
|
|
const numberInput = document.getElementById("number-input").value;
|
|
const base = document.querySelector(
|
|
'input[name="base"]:checked',
|
|
).value;
|
|
|
|
let decimal;
|
|
if (base === "10") {
|
|
decimal = parseInt(numberInput, 10);
|
|
} else if (base === "2") {
|
|
decimal = parseInt(numberInput, 2);
|
|
} else if (base === "8") {
|
|
decimal = parseInt(numberInput, 8);
|
|
} else if (base === "16") {
|
|
decimal = parseInt(numberInput, 16);
|
|
}
|
|
|
|
if (isNaN(decimal)) {
|
|
alert("请输入有效的数字！");
|
|
return;
|
|
}
|
|
|
|
const binary = formatBinary(decimal.toString(2)); // 格式化二进制
|
|
const hexadecimal = decimal.toString(16).toUpperCase();
|
|
const octal = decimal.toString(8);
|
|
|
|
const resultSection = document.getElementById("result-section");
|
|
|
|
resultSection.innerHTML = `
|
|
<p>十进制: <span id="decimal"></span></p>
|
|
<p>二进制: <span id="binary"></span></p>
|
|
<p>十六进制: <span id="hexadecimal"></span></p>
|
|
<p>八进制: <span id="octal"></span></p>
|
|
`;
|
|
|
|
document.getElementById("decimal").textContent = decimal;
|
|
document.getElementById("binary").textContent = binary;
|
|
document.getElementById("hexadecimal").textContent = hexadecimal;
|
|
document.getElementById("octal").textContent = octal;
|
|
|
|
const historyItem = {
|
|
input: numberInput,
|
|
base: base,
|
|
decimal: decimal,
|
|
binary: binary,
|
|
hexadecimal: hexadecimal,
|
|
octal: octal,
|
|
};
|
|
|
|
historyList.unshift(historyItem); // 将最新记录添加到最前面
|
|
updateHistoryList();
|
|
}
|
|
|
|
function formatBinary(binary) {
|
|
// 从右往左每隔4位加一个空格
|
|
return binary
|
|
.split("") // 将字符串转为数组
|
|
.reverse() // 反转数组，从右往左处理
|
|
|
|
.join("") // 重新拼接为字符串
|
|
.replace(/(\d{4})/g, "\$1 ") // 每隔4位加一个空格
|
|
.split("") // 再次转为数组
|
|
.reverse() // 反转回原始顺序
|
|
|
|
.join("") // 重新拼接为字符串
|
|
.trim(); // 去除首尾多余的空格
|
|
}
|
|
|
|
function updateHistoryList() {
|
|
const historyListElement = document.getElementById("history-list");
|
|
historyListElement.innerHTML = "";
|
|
|
|
historyList.forEach((item, index) => {
|
|
const listItem = document.createElement("li");
|
|
let displayText = "";
|
|
if (item.base === "10") {
|
|
displayText = `十进制: ${item.input}`;
|
|
} else if (item.base === "2") {
|
|
displayText = `二进制: ${item.input}`;
|
|
} else if (item.base === "8") {
|
|
displayText = `八进制: ${item.input}`;
|
|
} else if (item.base === "16") {
|
|
displayText = `十六进制: ${item.input}`;
|
|
}
|
|
listItem.textContent = displayText;
|
|
listItem.addEventListener("click", () => showHistoryResult(index));
|
|
historyListElement.appendChild(listItem);
|
|
});
|
|
}
|
|
|
|
function showHistoryResult(index) {
|
|
const item = historyList[index];
|
|
const resultSection = document.getElementById("result-section");
|
|
resultSection.innerHTML = `
|
|
<p>十进制: <span id="decimal"></span></p>
|
|
<p>二进制: <span id="binary"></span></p>
|
|
<p>十六进制: <span id="hexadecimal"></span></p>
|
|
<p>八进制: <span id="octal"></span></p>
|
|
`;
|
|
|
|
document.getElementById("decimal").textContent = item.decimal;
|
|
document.getElementById("binary").textContent = item.binary;
|
|
document.getElementById("hexadecimal").textContent = item.hexadecimal;
|
|
document.getElementById("octal").textContent = item.octal;
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|