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 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 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
header跳转和include包含问题详解
2012/09/08 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php类自动加载器实现方法
2015/07/28 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
jqTransform美化表单
2015/10/10 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
vue.js表格分页示例
2016/10/18 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
简单了解Python matplotlib线的属性
2019/06/29 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
初中音乐教学反思
2014/01/12 职场文书
初中生评语大全
2014/04/24 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
Spring Boot实现文件上传下载
2022/08/14 Java/Android