JavaScript 设计一个数字系统转换器

JavaScript 设计一个数字系统转换器

数字系统转换器可以用来将数字从一种类型转换为另一种类型,包括十进制、二进制、八进制和十六进制。

在这篇文章中,我们将使用JavaScript制作一个数字系统计算器。它将具有选择输入和输出的数字类型的选项。默认输入为1,随着改变将同时显示结果。

完成后,它将如下所示:

JavaScript 设计一个数字系统转换器

先决条件

项目结构

JavaScript 设计一个数字系统转换器

方法

  • 使用HTML元素如form、section和input创建一个基本的数字系统转换器结构,其中input用于接收数字输入,select用于下拉选项数字类型输入,并附加相应的class和id。
  • 使用CSS属性如margin、padding、background color、color、display、width、font sizes等来样式化计算器。
  • 在JavaScript中创建一个更新函数来在输入添加时更新值,以及一个反转函数来在其他结果输入改变时更新值,以维持正确的值。
  • 使用HTML DOM方法如document.getElementById和innerText以及value方法来访问和更新网页上的值。

示例: 这个代码示例演示了使用Javascript的数字系统计算器。

Javascript

// script.js 
  
// Import selected inputs 
let typeFrom = document.getElementById("typeFrom"); 
let typeTo = document.getElementById("typeTo"); 
let res = document.getElementById("res"); 
let input = document.getElementById("input"); 
let inputType = document.getElementById("inputType"); 
let resultType = document.getElementById("resultType"); 
  
const tags = { 
    10: "Decimal:", 
    2: "Binary:", 
    8: "Octal:", 
    16: "HexaDecimal:", 
}; 
  
function update() { 
    inputType.innerText = tags[typeFrom.value]; 
    resultType.innerText = tags[typeTo.value]; 
  
    // Update result value and title 
    res.value = Number( 
        parseInt(input.value, typeFrom.value) 
    ).toString(typeTo.value); 
} 
  
function reverse() { 
    inputType.innerText = tags[typeFrom.value]; 
    resultType.innerText = tags[typeTo.value]; 
      
    // Update input value 
    input.value = Number( 
        parseInt(res.value, typeTo.value) 
    ).toString(typeFrom.value); 
} 
  
update();
JavaScript

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>Number System Calculator</title> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1" /> 
    <link rel="stylesheet" href="style.css" /> 
</head> 
  
<body> 
    <div class="root"> 
        <h1 class="title">Number System Calculator</h1> 
        <section> 
            <div class="option"> 
                <span> 
                    <label>Convert from:</label> 
                    <select id="typeFrom" 
                            onchange="reverse()"> 
                        <option value="10"> 
                            Decimal 
                        </option> 
                        <option value="2"> 
                            Binary 
                        </option> 
                        <option value="8">Octal</option> 
                        <option value="16"> 
                            HexaDecimal 
                        </option> 
                    </select> </span><span> 
                    <label>Convert to:</label> 
                    <select id="typeTo" 
                            onchange="update()"> 
                        <option value="10"
                                lable="Decimal"> 
                            Decimal 
                        </option> 
                        <option value="2"> 
                            Binary 
                        </option> 
                        <option value="8">Octal</option> 
                        <option value="16"> 
                            HexaDecimal 
                        </option> 
                    </select> 
                </span> 
                <br /> 
                <br /> 
                <span> 
                    <label id="inputType">Enter {Decimal}:</label> 
                    <input type="text" 
                           min="0"
                           value="0" 
                           id="input" 
                           onkeyup="update()" /> 
                </span> 
                <span> 
                    <label id="resultType">Result {Octal}:</label> 
                    <input id="res"
                           onkeyup="reverse()" 
                           type="text" 
                           min="0" 
                           value="0" /> 
                </span> 
            </div> 
        </section> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>
HTML

CSS

/* style.css */
body { 
    text-align: center; 
    margin: auto; 
} 
  
.title { 
    font-size: 2.5rem; 
    color: rgba(35, 95, 180, 0.72); 
    text-decoration: underline dashed 3px rgb(23, 50, 92); 
} 
  
.root { 
    margin-top: 5%; 
    display: flex; 
    flex-direction: column; 
    max-width: 30rem; 
    margin: auto; 
    margin-top: 5%; 
    box-shadow: 0 4px 10px rgb(46, 63, 57); 
    background-color: rgb(122, 199, 173); 
    border-radius: 0 10px; 
    padding: 3%; 
} 
  
section { 
    font-size: x-large; 
    padding: 2%; 
    margin: auto; 
    text-align: left; 
} 
  
span>label { 
    width: 80%; 
} 
  
.option { 
    display: flex; 
    flex-direction: column; 
} 
  
.option>span { 
    display: flex; 
    padding: 2%; 
} 
  
select { 
    width: 33%; 
    font-size: medium; 
    outline: none; 
} 
  
input { 
    width: 30%; 
    font-size: large; 
}
JavaScript

输出:

JavaScript 设计一个数字系统转换器

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册