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广告实现代码
Nov 17 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
js中apply与call简单用法详解
Nov 06 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
JQuery toggle使用分析
2009/11/16 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
华润集团网上药店:健一网
2016/09/19 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
《晚上的太阳》教学反思
2014/04/23 职场文书
委托书格式
2014/08/01 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers