JavaScript 如何使用HTML、CSS和JavaScript创建一个二进制计算器
二进制计算器是一个可以对二进制数字进行数学计算的程序。在这篇博客中,我们将使用这个程序来计算二进制数字的加减乘除。这将是一个基本的计算器,它将使用HTML、CSS和JavaScript的基本概念来做同样的事情。那么,让我们从HTML结构开始吧。
HTML结构
首先,我们将制作一个表格,该表格将被分为几行,提供加1、加0、清除显示和加、减、乘、除号按钮等功能。
<form>
<table>
<tr>
<td colspan="4">
<input type="text" id="display" disabled />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="addToDisplay(1)" />
</td>
<td>
<input type="button" value="0" onclick="addToDisplay(0)" />
</td>
<td>
<input type="button" value="C" onclick="clearDisplay()" />
</td>
<td>
<input type="button" value="+" onclick="addToDisplay('+')" />
</td>
<td>
<input type="button" value="-" onclick="addToDisplay('-')" />
</td>
<td>
<input type="button" value="*" onclick="addToDisplay('*')" />
</td>
<td>
<input type="button" value="/" onclick="addToDisplay('/')" />
</td>
<td>
<input type="button" value="=" onclick="calculate()" />
</td>
</tr>
<tr>
<td colspan="4">
Equivalent Decimal is:
<p id="toDecimal"></p>
</td>
</tr>
<tr>
<td colspan="4">
<p id="previousCalculation"></p>
</td>
</tr>
<!-- more buttons for the other operations -->
</table>
</form>
正如你所看到的,我们有一个ID为 “display “的输入字段,它是禁用的。这个字段将用于显示输入和计算的结果。我们还有一组按钮,用于显示不同的二进制数字(0和1)和不同的数学运算(+、-、*、/)
。每个按钮都有一个onclick属性,点击后会触发一个JavaScript函数。
CSS样式设计
接下来,我们将添加一些CSS样式,使我们的计算器看起来更加美观。
<style>
/* Center the calculator on the page */
table {
margin: 0 auto;
padding: 20px;
}
/* Style the display */
#display {
background-color: #f2f2f2; /* gray */
text-align: right;
padding: 12px 20px;
font-size: 20px;
border: none;
width: 100%;
}
/* Add some spacing between the buttons */
input[type="button"] {
margin: 5px;
}
/* Give the buttons a consistent size and appearance */
input[type="button"] {
width: 50px;
height: 50px;
font-size: 18px;
background-color: #f2f2f2;
border: none;
cursor: pointer;
}
#toDecimal {
font-size: 30px;
}
/* Add hover effect to the buttons */
input[type="button"]:hover {
background-color: #e6e6e6;
}
/* Add a different style for the operator buttons */
input[type="button"][value="+"],
input[type="button"][value="-"],
input[type="button"][value="*"],
input[type="button"][value="/"] {
background-color: #4caf50;
color: white;
}
/* Add a different style for the clear button */
input[type="button"][value="C"] {
background-color: #f44336;
color: white;
}
/* Add a different style for the equal button */
input[type="button"][value="="] {
background-color: #2196f3;
color: white;
}
</style>
JavaScript功能
最后,我们将为我们的计算器添加JavaScript功能。
<script>
function addToDisplay(val) {
var display = document.getElementById("display");
display.value += val;
}
function clearDisplay() {
var display = document.getElementById("display");
display.value = "";
document.getElementById("toDecimal").innerHTML = "";
}
function calculate() {
var display = document.getElementById("display");
var result = eval(display.value);
display.value = result;
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
}
function calculate() {
var display = document.getElementById("display");
var input = display.value;
var result;
//splitting the input by operator
var numbers = input.split(/[+\-*/]/);
var operator = input.replace(numbers[0], "").replace(numbers[1], "");
//converting strings to binary
var num1 = parseInt(numbers[0], 2);
var num2 = parseInt(numbers[1], 2);
//checking the operator and performing the corresponding operation
switch (operator) {
case "+":
result = (num1 + num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "-":
result = (num1 - num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "*":
result = (num1 * num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "/":
result = (num1 / num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
default:
result = "Invalid operator";
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
}
display.value = result;
}
</script>
在index.html文件中结合上述所有代码
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
/* Center the calculator on the page */
table {
margin: 0 auto;
padding: 20px;
}
/* Style the display */
#display {
background-color: #f2f2f2; /* gray */
text-align: right;
padding: 12px 20px;
font-size: 20px;
border: none;
width: 100%;
}
/* Add some spacing between the buttons */
input[type="button"] {
margin: 5px;
}
/* Give the buttons a consistent size and appearance */
input[type="button"] {
width: 50px;
height: 50px;
font-size: 18px;
background-color: #f2f2f2;
border: none;
cursor: pointer;
}
#toDecimal {
font-size: 30px;
}
/* Add hover effect to the buttons */
input[type="button"]:hover {
background-color: #e6e6e6;
}
/* Add a different style for the operator buttons */
input[type="button"][value="+"],
input[type="button"][value="-"],
input[type="button"][value="*"],
input[type="button"][value="/"] {
background-color: #4caf50;
color: white;
}
/* Add a different style for the clear button */
input[type="button"][value="C"] {
background-color: #f44336;
color: white;
}
/* Add a different style for the equal button */
input[type="button"][value="="] {
background-color: #2196f3;
color: white;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td colspan="4">
<input type="text" id="display" disabled />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="addToDisplay(1)" />
</td>
<td>
<input type="button" value="0" onclick="addToDisplay(0)" />
</td>
<td>
<input type="button" value="C" onclick="clearDisplay()" />
</td>
<td>
<input type="button" value="+" onclick="addToDisplay('+')" />
</td>
<td>
<input type="button" value="-" onclick="addToDisplay('-')" />
</td>
<td>
<input type="button" value="*" onclick="addToDisplay('*')" />
</td>
<td>
<input type="button" value="/" onclick="addToDisplay('/')" />
</td>
<td>
<input type="button" value="=" onclick="calculate()" />
</td>
</tr>
<tr>
<td colspan="4">
Equivalent Decimal is:
<p id="toDecimal"></p>
</td>
</tr>
<tr>
<td colspan="4">
<p id="previousCalculation"></p>
</td>
</tr>
<!-- more buttons for the other operations -->
</table>
</form>
<script>
function addToDisplay(val) {
var display = document.getElementById("display");
display.value += val;
}
function clearDisplay() {
var display = document.getElementById("display");
display.value = "";
document.getElementById("toDecimal").innerHTML = "";
}
function calculate() {
var display = document.getElementById("display");
var result = eval(display.value);
display.value = result;
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
}
function calculate() {
var display = document.getElementById("display");
var input = display.value;
var result;
//splitting the input by operator
var numbers = input.split(/[+\-*/]/);
var operator = input.replace(numbers[0], "").replace(numbers[1], "");
//converting strings to binary
var num1 = parseInt(numbers[0], 2);
var num2 = parseInt(numbers[1], 2);
//checking the operator and performing the corresponding operation
switch (operator) {
case "+":
result = (num1 + num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "-":
result = (num1 - num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "*":
result = (num1 * num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "/":
result = (num1 / num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
default:
result = "Invalid operator";
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
}
display.value = result;
localStorage.setItem("previousCalculation", input + " = " + result);
var previousCalculation = localStorage.getItem("previousCalculation");
document.getElementById("previousCalculation").innerHTML = previousCalculation;
}
</script>
</body>
</html>
在本教程中,我们学习了如何使用HTML、CSS和JavaScript创建一个二进制计算器。我们已经看到了如何设置HTML结构,添加CSS样式和JavaScript功能来创建一个工作的计算器。你可以根据你的要求添加更多的功能,如处理错误情况和添加更多的操作。这个项目可以帮助你了解不同的语言如何一起工作,以创建一个动态和互动的网络应用。