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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
php 接口类与抽象类的实际作用
2009/11/26 PHP
php 地区分类排序算法
2013/07/01 PHP
php中in_array函数用法探究
2014/11/25 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
js multiple全选与取消全选实现代码
2012/12/04 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
中专生自我鉴定
2013/12/17 职场文书
课外科技活动总结
2014/08/27 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers