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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
syntaxhighlighter 使用方法
Jul 02 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
从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
smarty简单分页的实现方法
2014/10/27 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
大学生简历的个人自我评价
2013/12/04 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
公民授权委托书
2014/10/15 职场文书
大学生个人学习总结
2015/02/15 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
十八大观后感
2015/06/12 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
PHP基本语法
2021/03/31 PHP
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server