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 trim() 功能源代码
Feb 14 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
JS中准确判断变量类型的方法
Jun 01 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python如何快速实现分布式任务
2017/07/06 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
医大实习自我鉴定
2013/12/07 职场文书
财务部总监岗位职责
2014/03/12 职场文书
个人委托书范本
2014/04/02 职场文书
实习协议书范本
2014/04/22 职场文书
媒体宣传策划方案
2014/05/25 职场文书
歌咏比赛主持词
2015/06/29 职场文书
圣诞晚会主持词
2015/07/01 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
Python实现打乒乓小游戏
2021/09/25 Python