JavaScript 设计一个数字系统转换器
数字系统转换器可以用来将数字从一种类型转换为另一种类型,包括十进制、二进制、八进制和十六进制。
在这篇文章中,我们将使用JavaScript制作一个数字系统计算器。它将具有选择输入和输出的数字类型的选项。默认输入为1,随着改变将同时显示结果。
完成后,它将如下所示:
先决条件
项目结构
方法
- 使用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
输出: