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 相关文章推荐
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
jquery cookie的用法总结
Nov 18 Javascript
js网页右下角提示框实例
Oct 14 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
Vue父子之间值传递的实例教程
Jul 02 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数据库开发知多少
2006/10/09 PHP
php读取xml实例代码
2010/01/28 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
python 画图 图例自由定义方式
2020/04/17 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
计划生育个人总结
2015/03/02 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
图解上海144收音机
2021/04/22 无线电
解决 redis 无法远程连接
2022/05/15 Redis