From 80aac95e5a024ce396c8cc6df84e071f1b67816c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BD=AF=E4=BB=B6=E5=AD=A6=E4=B9=A0?= <1252043785@qq.com> Date: Wed, 9 Oct 2024 12:58:11 +0800 Subject: [PATCH] jzqzh --- index.html | 41 +++++++++++++++++++++++++++++++++ script.js | 34 ++++++++++++++++++++++++++++ styles.css | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..5951193 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + 进制转换器 + + + + +
+

进制转换器

+ + + + + + + + + + +

结果:

+

+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..96fccd5 --- /dev/null +++ b/script.js @@ -0,0 +1,34 @@ +document.getElementById('convert').addEventListener('click', function () { + const input = document.getElementById('input').value; + const fromBase = parseInt(document.getElementById('from-base').value); + const toBase = parseInt(document.getElementById('to-base').value); + + // 将输入转换为十进制 + let decimal; + try { + decimal = parseInt(input, fromBase); + if (isNaN(decimal)) throw new Error("无效输入"); + } catch (error) { + document.getElementById('result').innerText = "输入无效,请检查!"; + return; + } + + // 将十进制转换为目标进制 + let result; + switch (toBase) { + case 2: + result = decimal.toString(2); + break; + case 8: + result = decimal.toString(8); + break; + case 10: + result = decimal.toString(10); + break; + case 16: + result = decimal.toString(16).toUpperCase(); + break; + } + + document.getElementById('result').innerText = result; +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..1435a26 --- /dev/null +++ b/styles.css @@ -0,0 +1,66 @@ +body { + font-family: Arial, sans-serif; + background-color: #eef2f3; + margin: 0; + padding: 20px; +} + +.container { + max-width: 400px; + margin: auto; + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + color: #333; +} + +h2 { + margin-top: 20px; + color: #555; +} + +input, +select, +button { + width: 100%; + padding: 12px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 16px; +} + +input:focus, +select:focus, +button:focus { + outline: none; + border-color: #007bff; +} + +button { + background-color: #007bff; + color: white; + border: none; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s; +} + +button:hover { + background-color: #0056b3; +} + +#result { + padding: 10px; + background-color: #f8f9fa; + border: 1px solid #ddd; + border-radius: 5px; + text-align: center; + font-size: 18px; + color: #333; +} \ No newline at end of file