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 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
解决Vue项目中tff报错的问题
Oct 21 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
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
python中的yield from语法快速学习
2020/11/06 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
军校大学生个人的自我评价
2014/02/17 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
学校师德师风整改措施
2014/10/27 职场文书
出差报告格式模板
2014/11/06 职场文书
婚礼答谢礼品
2015/01/20 职场文书
团组织推荐意见
2015/06/05 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis