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的IE和火狐的兼容性注意事项
Mar 17 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
js实现头像上传并且可预览提交
Dec 25 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
php类常量的使用详解
2013/06/08 PHP
基于empty函数的输出详解
2013/06/17 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
Python作用域与名字空间原理详解
2020/03/21 Python
华润集团网上药店:健一网
2016/09/19 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
毕业生自我鉴定
2013/12/04 职场文书
《花木兰》教学反思
2014/04/09 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
python tkinter实现定时关机
2021/04/21 Python