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来实现动画导航效果的代码
Dec 16 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
微信小程序停止其他视频播放当前视频的实例代码
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
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
python单例模式实例解析
2018/08/28 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python opencv实现证件照换底功能
2019/08/19 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
高中毕业生个人自我鉴定
2013/11/24 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
golang slice元素去重操作
2021/04/30 Golang