js实现一个简易计算器


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<title>14th_test</title>
<meta charset="gb2312">
</head>
 
<body>
<h1>这是一个标题</h1>
<p>以下是一个简易计算器</p>
 
<table border="1" style="position:center;">
<tr>
<th>第一个数</th>
<td><input id="fir" type="text" /></td>
</tr>
 
<tr>
<th>第二个数</th>
<td><input id="sec" type="text" /></td>
</tr>
 
<tr>
<td colspan="2">
<button type="button" οnclick="add()">+</button>
<button type="button" οnclick="substract()">-</button>
<button type="button" οnclick="multiply()">*</button>
<button type="button" οnclick="divide()">/</button>
</td>
</tr>
 
<tr>
<td colspan="2"><p id="result"></p></td>
</tr>
</table>
 
<script>
var res; //保存计算结果
function add()
{
var first = document.getElementById("fir").value;
var second = document.getElementById("sec").value;
 res = Number(first) + Number(second); //这里"+"两端必须Number类型转换,否则当成字符串连接
 sent(res);
}
 
function substract()
{
var first = document.getElementById("fir").value;
var second = document.getElementById("sec").value;
 res = first - second;
 sent(res);
}
 
function multiply()
{
var first = document.getElementById("fir").value;
var second = document.getElementById("sec").value;
 res = first * second;
 sent(res);
}
 
function divide()
{
var first = document.getElementById("fir").value;
var second = document.getElementById("sec").value;
 res = first / second;
 sent(res);
}
 
function sent(re)
{
 document.getElementById("result").innerHTML = re;
}
</script>
</body>
</html>

output:

js实现一个简易计算器

更多计算器功能实现,请点击专题: 计算器功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 #Javascript
JS获取动态添加元素的方法详解
Jul 31 #Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
详解Vuex下Store的模块化拆分实践
Jul 31 #Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 #Javascript
Vuex 模块化使用详解
Jul 31 #Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python中的ceil()方法使用教程
2015/05/14 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
对Python函数设计规范详解
2019/07/19 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
银行职业规划书范文
2013/12/28 职场文书
仓管员岗位责任制
2014/02/19 职场文书
本科毕业生自荐信
2014/05/26 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
村官2015年度工作总结
2015/10/14 职场文书