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 自动安装exe程序
Nov 30 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
JS数组方法some、every和find的使用详情
Oct 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
Javascript 对象的解释
2008/11/24 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
pandas实现选取特定索引的行
2018/04/20 Python
Python 类的特殊成员解析
2018/06/20 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
python如何运行js语句
2020/09/09 Python
python打包生成so文件的实现
2020/10/30 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
DIY手工制作经营店创业计划书
2014/02/01 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
小学毕业寄语大全
2014/04/03 职场文书
中国梦口号
2014/06/13 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
担保书格式范文
2015/09/22 职场文书