sjh

1 year ago · dc576dc74a
parent ad89ce409a
commit dc576dc74a
1 changed files with 70 additions and 24 deletions
--- a/index.html
+++ b/index.html
@ -5,47 +5,93 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>进制转换程序</title>  
    <style>  
-        body { font-family: Arial, sans-serif; }  
-        input { margin-bottom: 10px; }  
+        body {  
+            font-family: Arial, sans-serif;  
+            background-color: #f4f4f4;  
+            padding: 30px;  
+            margin: 0;  
+        }  
+        h1 {  
+            text-align: center;  
+            color: #333;  
+        }  
+        .container {  
+            background: #fff;  
+            padding: 20px;  
+            border-radius: 8px;  
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
+            max-width: 400px;  
+            margin: 0 auto;  
+        }  
+        label {  
+            margin-top: 10px;  
+            font-weight: bold;  
+            display: block;  
+        }  
+        input {  
+            width: calc(100% - 20px);  
+            padding: 10px;  
+            margin: 5px 0 15px;  
+            border: 1px solid #ccc;  
+            border-radius: 4px;  
+            box-sizing: border-box;  
+        }  
+        button {  
+            background-color: #28a745;  
+            color: #fff;  
+            border: none;  
+            padding: 10px;  
+            border-radius: 4px;  
+            cursor: pointer;  
+            width: 100%;  
+        }  
+        button:hover {  
+            background-color: #218838;  
+        }  
+        h2 {  
+            text-align: center;  
+            color: #333;  
+        }  
+        #result {  
+            text-align: center;  
+            font-size: 18px;  
+            font-weight: bold;  
+            color: #007bff;  
+        }  
    </style>  
 </head>  
 <body>  
-    <h1>进制转换程序</h1>  
+    <div class="container">  
+        <h1>进制转换程序</h1>  
        
-    <label for="fromBase">输入进制 (R1):</label>  
-    <input type="number" id="fromBase" value="10" min="2" max="16"><br>  
+        <label for="fromBase">输入进制 (R1):</label>  
+        <input type="number" id="fromBase" value="10" min="2" max="16">  

-    <label for="numberX">输入数字 X:</label>  
-    <input type="text" id="numberX"><br>  
+        <label for="numberX">输入数字 X:</label>  
+        <input type="text" id="numberX" placeholder="例如：A3">  

-    <label for="toBase">转换进制 (R2):</label>  
-    <input type="number" id="toBase" value="10" min="2" max="16"><br>  
+        <label for="toBase">转换进制 (R2):</label>  
+        <input type="number" id="toBase" value="10" min="2" max="16">  
        
-    <button onclick="convertBase()">转换</button>  
+        <button onclick="convertBase()">转换</button>  
        
-    <h2>转换结果 Y:</h2>  
-    <p id="result"></p>  
+        <h2>转换结果 Y:</h2>  
+        <p id="result"></p>  
+    </div>  

    <script>  
        function convertBase() {  
-            // 获取输入值  
            const fromBase = parseInt(document.getElementById('fromBase').value);  
            const numberX = document.getElementById('numberX').value.trim();  
            const toBase = parseInt(document.getElementById('toBase').value);  

-            // 验证输入  
            if (!isValidNumberInBase(numberX, fromBase)) {  
                document.getElementById('result').innerText = "输入的数字 X 在指定的进制 R1 中无效！";  
                return;  
            }  

-            // 将 X 从 R1 进制转换为十进制  
            const decimalValue = parseInt(numberX, fromBase);  
-
-            // 将十进制转换为 R2 进制  
            const resultY = decimalToBase(decimalValue, toBase);  
-
-            // 输出结果  
            document.getElementById('result').innerText = resultY;  
        }