21xrx.com
2025-04-21 21:01:37 Monday
文章检索 我的文章 写文章
我一直对计算机编程充满兴趣
2023-06-13 09:04:46 深夜i     9     0
JavaScript 简易计算器 代码例子

我一直对计算机编程充满兴趣，今天我想与大家分享一个JavaScript简易计算器的代码例子。在学习JavaScript的过程中，了解如何编写一个计算器是很重要的一步。下面我将向大家介绍，如何使用HTML、CSS和JavaScript编写一个简单的计算器。

首先我们需要使用HTML创建计算器的基本页面，并且为每个数字和操作符按钮分配一个ID。下面是一个基本的HTML代码实例：

JavaScript 简易计算器

 

 
  0

在CSS中，我们可以设置按钮的样式和计算器的显示样式。

接下来，我们需要使用JavaScript为计算器添加逻辑。下面是一个简单的代码实例，可以实现加、减、乘、除和清除操作。

window.onload = function() {
var result = document.getElementById("result");
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var zero = document.getElementById("zero");
var clear = document.getElementById("clear");
var add = document.getElementById("add");
var subtract = document.getElementById("subtract");
var multiply = document.getElementById("multiply");
var divide = document.getElementById("divide");
var equals = document.getElementById("equals");
var input = "";
var operator = "";
var firstNumber = 0;
one.onclick = function() {
result.innerHTML = input += "1";
}
two.onclick = function() {
result.innerHTML = input += "2";
}
three.onclick = function() {
result.innerHTML = input += "3";
}
four.onclick = function() {
result.innerHTML = input += "4";
}
five.onclick = function() {
result.innerHTML = input += "5";
}
six.onclick = function() {
result.innerHTML = input += "6";
}
seven.onclick = function() {
result.innerHTML = input += "7";
}
eight.onclick = function() {
result.innerHTML = input += "8";
}
nine.onclick = function() {
result.innerHTML = input += "9";
}
zero.onclick = function() {
result.innerHTML = input += "0";
}
clear.onclick = function()
result.innerHTML = "0";
input = "";
operator = "";
firstNumber = 0;
add.onclick = function() {
if (input !== "") {
firstNumber = parseFloat(input);
operator = "+";
input = "";
}
}
subtract.onclick = function() {
if (input !== "") {
firstNumber = parseFloat(input);
operator = "-";
input = "";
}
}
multiply.onclick = function() {
if (input !== "") {
firstNumber = parseFloat(input);
operator = "*";
input = "";
}
}
divide.onclick = function() {
if (input !== "") {
firstNumber = parseFloat(input);
operator = "/";
input = "";
}
}
equals.onclick = function() {
var secondNumber = parseFloat(input);
if (operator === "+") {
result.innerHTML = firstNumber + secondNumber;
input = firstNumber + secondNumber;
}
if (operator === "-")
result.innerHTML = firstNumber - secondNumber;
input = firstNumber - secondNumber;
if (operator === "*") {
result.innerHTML = firstNumber * secondNumber;
input = firstNumber * secondNumber;
}
if (operator === "/")
result.innerHTML = firstNumber / secondNumber;
input = firstNumber / secondNumber;
}
}

最后，我们将这些代码存为名为“calculator.html”的文件，并将JavaScript代码存为名为“calculator.js”的文件。在我们打开这个网页时，将会看到一个简单的计算器，可以实现基本的数学运算。

标题：JavaScript简易计算器代码，带有HTML和CSS示例

  
  

评论区