21xrx.com
2024-12-23 15:21:54 Monday
登录
文章检索 我的文章 写文章
用javascript制作简易计算器
2023-06-10 16:34:34 深夜i     --     --

我是一个前端开发者,我最近在学习javascript。今天我想分享我如何使用javascript制作一个简易计算器的经验。

在制作这个计算器时,我用到了html和css来设计页面,最重要的是用javascript编写了计算器的逻辑和功能。下面是我的代码例子:

HTML代码:

 html

 

 

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

 

CSS代码:

 css

.calculator

 width: 200px;

 background-color: #f2f2f2;

 padding: 10px;

.result

 width: 100%;

 height: 50px;

 font-size: 20px;

 text-align: right;

 border: none;

 background-color: #fff;

 margin-bottom: 10px;

 padding: 5px;

.keypad {

 display: grid;

 grid-template-columns: repeat(4, 1fr);

 grid-gap: 5px;

}

button

 font-size: 20px;

 padding: 5px;

 background-color: #c2c2c2;

 border: none;

 cursor: pointer;

.zero-button

 grid-column: 1/3;

在我的javascript代码中,我定义了以下三个关键字:

1. addNumber(num) - 用于将数字添加到显示屏。

2. clearResult() - 用于清除显示屏上的所有数字和符号。

3. getResult() - 用于计算并显示结果。

下面是我的javascript代码:

 javascript

var result = document.querySelector('.result');

var expression = [];

function addNumber(num) {

 expression.push(num);

 result.value = expression.join('');

}

function clearResult() {

 expression = [];

 result.value = '';

}

function getResult() {

 if (expression.length === 0) {

  return;

 }

 var calculation = eval(expression.join(''));

 expression = [calculation];

 result.value = calculation;

}

function addSymbol() {

 expression.push('+');

}

function subtractSymbol() {

 expression.push('-');

}

function multiplySymbol() {

 expression.push('*');

}

function divideSymbol() {

 expression.push('/');

}

这个简易计算器可以计算两个或多个数字的加减乘除。当我按下操作符按钮时,它将操作符存储到表达式数组中。当我点击等号按钮时,它将对表达式数组求值,将计算结果存储到数组中,并在显示屏上显示该结果。

我的这个javascript制作简易计算器的经验让我更好的理解了javascript中的语言特点和语法。希望我的经验对其他学习javascript的人也能有所帮助。

  
  

评论区

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