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 面向对象编程 聊聊对象的事
Sep 17 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
从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 中dirname(_file_)讲解
2007/03/18 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
thinkphp分页实现效果
2016/10/13 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
自考生自我评价分享
2014/01/18 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
《锄禾》教学反思
2014/04/08 职场文书
教师暑期培训感言
2014/08/15 职场文书
求职简历自我评价范文
2015/03/10 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
导游词之镇江焦山
2019/11/21 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技