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源码学习javascript(一)
Dec 27 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
AngularJS手动表单验证
Feb 01 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 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配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
php中如何执行linux命令详解
2018/11/06 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
PHP实现简单的计算器
2020/08/28 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
列举Python中吸引人的一些特性
2015/04/09 Python
python对于requests的封装方法详解
2019/01/03 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
服务口号大全
2014/06/11 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
滴水洞导游词
2015/02/10 职场文书
毕业生对母校寄语
2015/02/26 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
MySQL 数据库范式化设计理论
2022/04/22 MySQL