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面向对象编程 for Cookie
Sep 19 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
vue实现短信验证码输入框
Apr 17 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
定义php常量的详解
2013/06/09 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
js实现打字小游戏
2019/12/17 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
证婚人搞笑证婚词
2014/01/10 职场文书
学校对教师的评语
2014/04/28 职场文书
岗位说明书范文
2014/05/07 职场文书
团队队名口号大全
2014/06/06 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
优秀员工事迹材料
2014/12/20 职场文书
现役军人家属慰问信
2015/03/24 职场文书
《观潮》教学反思
2016/02/17 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
pandas 实现将NaN转换为None
2021/05/14 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS