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 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
js比较日期大小的方法
May 12 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
javascript中的隐式调用
Feb 10 Javascript
iview table高度动态设置方法
Mar 14 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 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计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
先进个人事迹材料
2014/01/25 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
入股合作协议书
2014/10/12 职场文书
领导参观欢迎词
2015/01/26 职场文书
绿色环保倡议书
2015/04/28 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
redis中lua脚本使用教程
2021/11/01 Redis
在js中修改html body的样式
2021/11/11 Javascript