js编写简易的计算器


Posted in Javascript onJuly 29, 2020

本文实例为大家分享了js编写简易计算器的具体代码,供大家参考,具体内容如下

使用绑定时间触发 加减乘除

加:

js编写简易的计算器

减:

js编写简易的计算器

乘:

js编写简易的计算器

除:

js编写简易的计算器

源代码:

<body> 
 第一个数:<input type="text" id="num1" /><p></p> 
 <div id="ss">
 <button type="button" >+</button>
 <button type="button" >-</button>
 <button type="button" >*</button>
 <button type="button" >/</button>
 </div>
 <p></p> 
 第二个数:<input type="text" id="num2" /><p></p> 
 计算结果:<input type="text" id="result" /> 
 <script> 
 var x1=document.getElementById("num1");
 var x2=document.getElementById("num2"); 
 var x3=document.getElementById("result"); 
 
 addEventListener("click",function(event){ 
 var obj = event.target; //指向事件源
 var v=obj.innerHTML; //获取事件
 if(isNaN(x1.value) || isNaN(x2.value)){
 alert("不能为非数字!");
 } 
 if(v=="+"){
 if(x1.value=="" || x2.value==""){alert('输入框不能为空!');}
 x3.value = parseFloat(x1.value) + parseFloat(x2.value); }
 if(v=="-"){
 if(x1.value=="" || x2.value==""){alert('输入框不能为空!');}
 x3.value = parseFloat(x1.value) - parseFloat(x2.value); }
 if(v=="*"){
 if(x1.value=="" || x2.value==""){alert('输入框不能为空!');}
 x3.value = parseFloat(x1.value) * parseFloat(x2.value); }
 if(v=="/"){
 if(x1.value=="" || x2.value==""){alert('输入框不能为空!');}
 if(x2.value==0){alert("除数不能为0!")}
 x3.value = parseFloat(x1.value) / parseFloat(x2.value); }
 }) 
 
 </script> 
</body>

更多计算器功能实现,请点击专题: 计算器功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 #Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 #Javascript
Node.js 深度调试方法解析
Jul 28 #Javascript
vue-列表下详情的展开与折叠案例
Jul 28 #Javascript
js 数组当前行添加数据方法详解
Jul 28 #Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 #Javascript
JS代码简洁方式之函数方法详解
Jul 28 #Javascript
You might like
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
python实现机器学习之多元线性回归
2018/09/06 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
最小二乘法及其python实现详解
2020/02/24 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
教师自荐书
2013/10/08 职场文书
热能动力工程毕业生自荐信
2013/11/07 职场文书
体育专业自荐书
2014/05/29 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
画展邀请函
2015/01/31 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书