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 最简单的属性菜单
Oct 08 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 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统计文章排行示例
2014/03/04 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
浅谈js闭包理解
2019/03/28 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python实发邮件实例详解
2019/11/11 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
python pillow库的基础使用教程
2021/01/13 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
门卫人员岗位职责
2013/12/24 职场文书
敬老院活动总结
2014/04/28 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书