用javascript做简易计算器

最新推荐文章于 2024-10-25 08:30:00 发布
最新推荐文章于 2024-10-25 08:30:00 发布
阅读量4.8k 收藏 19
点赞数 8
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/goddess_y/article/details/79955288
本文介绍如何使用HTML和JavaScript创建一个简单的计算器。通过表格布局输入框和按钮，并利用JavaScript进行数值计算。涉及HTML表单元素及JavaScript的基本操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

                用javascript代码做一个简易的计算器

首先在body属性里用table标签建立表格，用colspan标签合并单元格，例如用到<input type="button" value="+" onclick="mycomputer('+')">表示建立按钮body里代码如下：
然后在html里用<script type="text/javascript"></script>和<style type="text/css"></style>对表格进行定义和修饰
<style type="text/css"></style>是对表格和按钮外部边框长度宽度颜色的修饰代码如下：

最后在<script type="text/javascript"></script>里对运算过程进行定义并且用switch语句进行运算代码如下：
最终效果如下：




goddess_y
关注
JavaScript简单计算器
⁣  ⁡⁣⁣
10-20 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body> <!--页面布局--> <input type="text" id="num1" placeholder="请输入第一个数字"/> <input type="text" id.
JavaScript简易计算器制作
weixin_44382788的博客
01-24 2461
成品图 这个简易的计算器只能实现 + - * /的运算 在动手之前，我们要先理清思路，看图，若想实现这样一个简易的计算器，我们需要两个输入框用来存放我们需要进行运算的两个值，一个下拉框来选择要进行什么运算，一个按钮来实现开始运算，一个输入框来保存我们计算后的值！ 首先，我们在body中制作页面需要的这些元素 &lt;body&gt; &lt;input type="text" id...
javascript制作简易计算器
10-09
用javascript编程语言编写的简易计算器，仅包含+-*/运算
js制作简单计算器
08-19
用的时候还需要下载个jqury框架，里面不但有计算器实现的js方法，js的一些字符验证方法！挺实用的！
JavaScript制作简易计算器（不用eval）
12-07
本文实例为大家分享了js制作简易计算器的具体代码，供大家参考，具体内容如下 <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } body { background: #940032; } #counter { width: 500px; height:
使用 JavaScript 实现简易计算器
最新发布
爱写代码的小朋友
10-25 1361
JavaScript实现计算器
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
JavaScript版简易计算器
KimSoft's Blog
03-05 3751
在JavaScript版搜索了一下“计算器”，只搜索到三条记录。所以发出来，今天没事写着玩儿的。比较简单，没有什么技术含量和实用价值，只供新手学习，高手看看有没问题，再完善一下。测试环境：IE6 + FireFox1.5下测试通过技术说明：1、documnet.getElementsByTagName的用法2、给HTML对象绑定事件：element.事件名 = 函数名3、eval的用法
使用JS完成一个简单的计算器功能
chuisiqin5881的博客
05-08 2752
<!DOCTYPEhtml> <html> <head> <title>事件</title> <scripttype="text/javascript"> functioncount(){ ...
javascript做一个简单的计算器
m0_59169193的博客
05-03 2337
// 简易计算器 // 算法 ： 用prompt用户选择计算器，if判断用户选择的计算器并弹框输入计算数值；后在if里调用函数计算 var choice = prompt('1.加法运算'+'\n' + '2.减法运算' + '\n' + '3.乘法运算' + '\n' + '4.除法运算'); if (choice == '1') { var num1 = prompt('请输入第1个值:'); v.
JavaScript简易计算器
02-28
利用JavaScript简易计算器，北大青鸟javascript作业题
用javascript做简单计算器
10-10
用javascript做简单计算器，实现加减乘除的简单运算。
制作计算器（JavaScript）
weixin_48112113的博客
07-19 5392
1. 任务要求 1）掌握数据的类型转换 2）学会获取文本框控件的数据以及给相应控件赋值 3）掌握有参函数的定义 4）学会使用数值判断函数 5）学会使用eval()方法编译字符串算式 2. 实现思路 1）在TNumber函数里实现对输入的数据进行累加，以便后面计算结果。 2）同时可以定义一个sum，将点击的每个按钮值进行累加，以便最后可以输出式子。 3）在Clear...
利用原生javascript制作简易计算器
PILIpilipala的博客
08-08 1870
第一步：利用html构建好计算器的大概形状样式 <table> <tr> <td colspan="4" ><input id="text" type="text" value="0" /></td> </tr> <tr> <td colspan="2"><button class="btn">del</button></t
利用JS制作简易计算器
weixin_46394746的博客
06-07 6146
目的：利用JS制作一个简易的计算器，能够实现简单四则运算 要求：三个输入框输入值只能是数字，当输入非数字时提示并清空输入框，利用正则表达式；点击按钮实现计算。 话不多说，贴图为上： 看了效果图，下面就是怎么实现的问题了，请看代码： <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title
javascript简易计算器
a17783481239的博客
09-18 5027
查看历史记录
JavaScript实现简易计算器
前端攻城狮进阶之路
06-28 713
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;IFE ECMAScript&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input id=&quot
js代码做计算器
Anansoul的博客
01-07 2196
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;script type="text/javascript"&gt; window.on
javascript做简易计算器
09-19
在JavaScript中创建一个简易计算器，你可以使用HTML作为界面元素，配合JavaScript处理用户输入并进行计算。下面是一个简单的步骤： 1. **HTML结构**: ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简易计算器</title> </head> <body> <input type="text" id="display" disabled> <br> <button onclick="appendNumber('7')">7</button> <!-- 添加其他数字按钮... --> <button onclick="appendOperator('+')">+</button> <!-- 添加其他运算符按钮... --> <button onclick="calculate()">=</button> </body> </html> ``` 2. **JavaScript函数**: ```javascript let display = document.getElementById('display'); let currentOperand = ''; let previousOperand = ''; function appendNumber(num) { currentOperand += num; display.value = currentOperand; } function appendOperator(op) { if (currentOperand !== '') { evaluateAndReset(); previousOperand = currentOperand; currentOperand = op; } else { currentOperand = op; } } function evaluateAndReset() { let result = eval(previousOperand + currentOperand); display.value = result; currentOperand = result; } function calculate() { // 如果当前还有未输入的数字，先完成一次计算 if (currentOperand !== '') { evaluateAndReset(); } // 此处可以添加错误检查和清理 // 然后对用户输入的所有数进行最终的计算 } ``` 在这个例子中，`eval()`函数用于即时计算用户的表达式，但在实际项目中，由于安全性和性能考虑，通常会使用更复杂的方式来解析和计算。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值