21xrx.com
2025-04-16 10:08:01 Wednesday
文章检索 我的文章 写文章
我最近在学习JavaScript
2023-06-12 18:46:35 深夜i     7     0
JavaScript 计算器代码 加减乘除

我最近在学习JavaScript,今天写了一个简单的计算器代码,分享给大家。这个代码仅有几十行,但功能也很实用,可以进行加、减、乘、除运算。

首先,我们需要在HTML中创建一个文本框和几个按钮,用来输入数字和进行运算。代码如下:

其中,id为“result”的文本框用来显示计算结果,每个按钮的onclick事件对应一个JavaScript函数。

下面是JavaScript代码的实现,分别实现了添加数字、运算符、清除结果和计算功能:

script
var result = document.getElementById("result");
var operator = null;
var firstNum = 0;
var secondNum = 0;
function addNumber(num) {
  if(operator == null) {
    firstNum = firstNum * 10 + num;
    result.value = firstNum;
  } else {
    secondNum = secondNum * 10 + num;
    result.value = secondNum;
  }
}
function addOperator(op)
  operator = op;
function clearResult()
  result.value = "";
  firstNum = 0;
  secondNum = 0;
  operator = null;
function calculate() {
  var resultNum = 0;
  switch(operator) {
    case "+":
      resultNum = firstNum + secondNum;
      break;
    case "-":
      resultNum = firstNum - secondNum;
      break;
    case "*":
      resultNum = firstNum * secondNum;
      break;
    case "/":
      resultNum = firstNum / secondNum;
      break;
  }
  result.value = resultNum;
}

其中,addNumber函数用来添加数字到第一个或第二个操作数中,addOperator函数用来更新运算符,clearResult函数用来清除计算结果和操作数,calculate函数用来进行实际的运算,并将结果显示到文本框中。

最后,我们来看一下这个计算器的效果:

![calculator](https://img-blog.csdn.net/20171210182328169?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGJpc3NvdXRo/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/85)

通过这个简单的计算器代码,我们不仅可以熟悉JavaScript的基本语法和DOM操作,也可以提高自己的编程能力,希望大家多多尝试。

  
  

评论区

请求出错了