21xrx.com
2025-03-23 21:09:51 Sunday
文章检索 我的文章 写文章
我学习了JavaScript 成功制作出简单计算器
2023-06-11 17:06:42 深夜i     --     --
JavaScript 计算器 代码例子

最近我在学习JavaScript,根据老师的教学内容,我成功地制作出了一个简单的计算器。这个计算器可以进行加减乘除等基本运算,下面我来分享一下我的学习经历。

首先,在HTML文件中,我创建了两个输入框用于输入运算数字和一个下拉框用于选择运算符号。然后在JavaScript文件中,我使用了addEventListener方法监听了按钮的点击事件,如下面所示:

script
document.querySelector('#calc_btn').addEventListener('click', function()
 // 在这里编写计算器功能代码
);

为了实现计算器的基本功能,我根据选择的运算符号,使用了switch语句判断运算操作,并将结果显示在页面上。代码如下:

script
const num1 = parseFloat(document.querySelector('#num1').value);
const num2 = parseFloat(document.querySelector('#num2').value);
const operator = document.querySelector('#operator').value;
let result;
switch (operator) {
 case '+':
  result = num1 + num2;
  break;
 case '-':
  result = num1 - num2;
  break;
 case '*':
  result = num1 * num2;
  break;
 case '/':
  result = num1 / num2;
  break;
 default:
  result = '请选择运算符号';
}
document.querySelector('#result').innerHTML = result;

在制作过程中,我学习到了很多关于JavaScript的知识,例如使用querySelector方法选中页面元素,使用parseFloat方法将字符串转换为数字等。我也深刻体会到了编程的乐趣和成就感。

  
  

评论区