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实现Windows任务管理器的代码
Mar 27 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
JS函数基本定义与用法示例
Jan 15 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
深入理解php的MySQL连接类
2013/06/07 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
使用URL传输SESSION信息
2015/07/14 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
深入浅出学习python装饰器
2017/09/29 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
详解Python if-elif-else知识点
2018/06/11 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
cf收人广告词
2014/03/14 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
使用Apache Camel表达REST服务的方法
2022/06/10 Servers
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js