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 相关文章推荐
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
jquery滚动特效集锦
Jun 03 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
解决vuex刷新数据消失问题
Nov 12 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
js 数值项目的格式化函数代码
2010/05/14 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
javaScript产生随机数的用法小结
2018/04/21 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
python集合删除多种方法详解
2020/02/10 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
党组织公开承诺书
2014/03/29 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Python find()、rfind()方法及作用
2022/12/24 Python