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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
swiper实现导航滚动效果
Dec 13 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
杏林同学录(九)
2006/10/09 PHP
php仿ZOL分页类代码
2008/10/02 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
js闭包用法实例详解
2016/12/13 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
男方父母证婚词
2014/01/12 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
父亲节活动策划方案
2014/08/24 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
求职自我推荐信
2015/03/24 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js