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 相关文章推荐
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
JQuery datepicker 使用方法
May 20 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
浅谈PHP封装CURL
2019/03/06 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python合并同类型excel表格的方法
2018/04/01 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
如何让python的运行速度得到提升
2020/07/08 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
python自动生成sql语句的脚本
2021/02/24 Python
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
户籍证明书标准模板
2014/09/10 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js