使用Javascript编写一个简单计算器

时间: 2024-05-05 17:16:22 浏览: 94

使用JavaScript 编写简单计算器

在JavaScript中创建一个简单的计算器是一项基础任务，可以帮助初学者理解事件处理、DOM操作以及基本的数学运算。以下是如何实现这个简单计算器的详细步骤和相关知识点： 1. **HTML 结构**： HTML 部分定义了一个表格，包含了数字键和运算符键，以及一个文本输入框用于显示用户输入的表达式。`<input type="text" name="expr" size="30" action="compute(this.form)" />` 这个输入框是计算器的主要组成部分，它不仅用来显示用户输入，还通过`action`属性触发计算。 2. **JavaScript 变量**：在JavaScript部分，定义了一系列的全局变量，用于存储数字和运算符。例如：`var one="1";`，`var plus="+";`等。这样做的目的是方便在按钮点击事件中引用这些值。 3. **事件处理**：使用`onclick`属性在HTML元素中直接绑定事件处理函数。例如：`onclick="enter(this.form,seven)"`。当用户点击“7”按钮时，会调用`enter`函数，并传入当前表单和数字"7"作为参数。 4. **函数定义**： - `enter`函数接收两个参数，一个是表单对象，另一个是用户点击的按钮对应的值（如数字或运算符）。它将这个值添加到表达式输入框的末尾，模拟用户在输入计算器表达式。 - `compute`函数是等于号按钮的事件处理函数。它通过调用JavaScript内置的`eval`函数来计算输入的表达式。`eval`函数会将字符串当作JavaScript代码执行并返回结果。 5. **eval 函数**： `eval`函数在本例中用于计算输入的数学表达式。但是，`eval`有安全风险，因为它可以执行任意的JavaScript代码。在实际应用中，应避免使用`eval`，尤其是在处理用户输入时。对于计算器这样的应用，可以使用更安全的数学库，如`math.js`，或者自己编写解析和计算表达式的逻辑。 6. **DOM 操作**：通过JavaScript操作DOM元素，如`obj.expr.value`获取或设置`expr`输入框的值。`this.form`指的是触发事件的按钮所在表单，`expr`是表单内的一个元素。 7. **表单提交**：在HTML部分，`<form>`标签中的`action`属性为空，这意味着默认不会进行任何形式的提交。然而，这里的`action="compute(this.form)"`是自定义的行为，当用户按下等于号按钮时，会执行`compute`函数而不是标准的表单提交。 8. **布局与样式**：使用`<table>`元素创建了计算器的布局，每个数字和运算符都在一个单元格`<td>`内。虽然这种布局在早期网页设计中常见，但现代Web开发更倾向于使用CSS进行布局控制，如Flexbox或Grid。总结起来，创建一个简单的JavaScript计算器涉及到HTML、CSS和JavaScript的基本知识，包括事件处理、DOM操作和简单的数学计算。在这个过程中，我们还可以学习到如何在JavaScript中定义和调用函数，以及如何安全地处理用户输入。虽然这个例子很基础，但它提供了一个了解JavaScript交互性的好起点。

以下是一个简单的计算器，使用Javascript编写： ```html <!DOCTYPE html> <html> <head> <title>简单计算器</title> <style type="text/css"> input[type="button"] { width: 50px; height: 50px; font-size: 20px; margin: 5px; } input[type="text"] { width: 206px; height: 50px; font-size: 20px; } </style> </head> <body> <input type="text" id="result" readonly><br> <input type="button" value="1" onclick="insert(1)"> <input type="button" value="2" onclick="insert(2)"> <input type="button" value="3" onclick="insert(3)"> <input type="button" value="+" onclick="insert('+')"><br> <input type="button" value="4" onclick="insert(4)"> <input type="button" value="5" onclick="insert(5)"> <input type="button" value="6" onclick="insert(6)"> <input type="button" value="-" onclick="insert('-')"><br> <input type="button" value="7" onclick="insert(7)"> <input type="button" value="8" onclick="insert(8)"> <input type="button" value="9" onclick="insert(9)"> <input type="button" value="*" onclick="insert('*')"><br> <input type="button" value="0" onclick="insert(0)"> <input type="button" value="C" onclick="clearResult()"> <input type="button" value="=" onclick="calculate()"> <input type="button" value="/" onclick="insert('/')"> <script type="text/javascript"> function insert(num) { document.getElementById('result').value += num; } function clearResult() { document.getElementById('result').value = ''; } function calculate() { var result = document.getElementById('result').value; var answer = eval(result); document.getElementById('result').value = answer; } </script> </body> </html> ``` 这个计算器有一个文本框和一些按钮，每个按钮代表一个数字或者操作符。当用户点击一个数字或操作符时，它们将被添加到文本框中。当用户点击“=”按钮时，计算器将计算文本框中的表达式，并将结果显示在文本框中。当用户点击“C”按钮时，文本框将被清空。

阅读全文

使用Javascript编写一个简单计算器

相关推荐

用javascript编写的一个简单的计算器

用javascript做简单计算器

用JavaScript编写一个简易计算器的代码示例

用Javascript编写一个简单计算器

用JavaScript编写一个简易计算器界面，使用表单控件完成界面设计，要求具有计算功能。

用用html，javascript编写一个简易计算器界面，使用表单控件完成界面设计，要求具有计算功能。

使用 JavaScript 编写的简单 BMI 计算器，附带源代码.zip

使用 JavaScript 编写的简单小费计算器（带源代码）.zip

使用JavaScript编写的简单计算器

使用 JavaScript 编写的每日用水计算器（附源代码）.zip

使用原生JavaScript编写的简易计算器

JavaScript编写函数实现简易计算器。

用JavaScript编写函数实现简易计算器

使用 javascript 语言编写一个网页计算器 程序

使用JavaScript制作一个简单计算器

使用vs编写一个简单计算器

用 JavaScript编写一个计算器

js编写一个简易计算器

最新推荐

JavaScript编写的网页计算器实现代码机器界面如文档内

Spring MVC架构详解与配置指南：实现Web应用的高效开发

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

"互动学习：行动中的多样性与论文攻读经历"

PROTEUS符号定制指南：个性化元件创建与修改的全面攻略

https://www.lagou.com/wn/爬取该网页职位名称，薪资待遇，学历，企业类型，工作地点数据保存为CSV文件的python代码

使用 javascript 语言编写一个网页计算器程序