21xrx.com
2024-12-23 01:59:42 Monday
登录
文章检索 我的文章 写文章
我一直对计算机编程充满兴趣
2023-06-13 09:04:46 深夜i     --     --
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示例

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复