JS简易计算器实例讲解


Posted in Javascript onJune 30, 2020

本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下

简易计算器:

1)选择需要运算的类型,输入对应的数字
2)输入需要参与运算的数字
3)输入“计算”二字,进行运算后,显示运算结果及运算表达式

JS简易计算器实例讲解

<script type="text/javascript">
 // 加法运算
 function plus(arrPlus){
 var sum = 0;
 for(var i = 0 ; i < arrPlus.length ; i++){
 sum = sum + arrPlus[i];
 }
 console.log('函数plus循环后求和结果的数是'+ sum);
 return sum;

 }
 // 减法运算
 function subtract(arrSubtract){
 var substractResult = arrSubtract[0];
 for(var i = 1 ; i < arrSubtract.length ; i++){
 substractResult = substractResult - arrSubtract[i] ;
 }
 return substractResult;
 }
 // 乘法运算
 function multiple(arrMultiple){
 var multipleResult = 1;
 for(var i = 0 ; i < arrMultiple.length ; i++){
 multipleResult = multipleResult * arrMultiple[i];
 }
 return multipleResult;
 }
 // 除法运算
 function divide(arrDivide){
 var divideResult = arrDivide[0];
 for(var i = 1 ; i < arrDivide.length ; i++){
 divideResult = divideResult / arrDivide[i];
 }
 return divideResult; 
 }
 // 输入需要运算的数值
 function calculateNum(num,mention){
 i = 0;
 num = [];
 do{
 // var i = 0;
 mention = prompt('请输入第'+ (i+1) +'个数,注意:'+'输入"计算"二字将获得结果');
 if(mention != '计算'){
 mention = mention * 1;
 num[i]= mention ;
 i++;
 } 
 }while(mention != '计算');
 console.log('calculateNum存入的数值是' + num);
 return num;
 }
 //显示计算表达式
 function formula( arr){
 fom = [] ;
 for(var i =0 ; i < arr.length ; i++){
 if(apply == 1){
 fom = fom + arr[i] + '+';
 }else if (apply == 2){
 fom = fom + arr[i] + '-';
 }else if (apply == 3){
 fom = fom + arr[i] + '*';
 }else if(apply == 4){
 fom = fom + arr[i] + '/';
 } 
 }
 console.log('计算表达式formula函数输出的是' + fom);
 return fom;
 }

 //全局变量
 var i = 0 ;
 var fom = '';
 var num = [];
 var mention = ''
 apply = '';
 do{
 // 计算器主面板
 apply = prompt('欢迎使用简易计算器\n'+'1、加法运算\n'+'2、减法运算\n'+'3、乘法运算\n'+'4、除法运算\n'+'5、退出\n'+'请输入您的选项');
 apply = apply * 1;
 switch(apply){
 case 1:
 var plusInput = calculateNum(num,mention); 
 alert(formula(plusInput)+'计算结果是' + plus(plusInput));
 break;
 case 2:
 var subtractInput = calculateNum(num,mention); 
 alert(formula(subtractInput)+'计算结果是' + subtract(subtractInput));
 break; 
 case 3:
 var multipleInput = calculateNum(num,mention); 
 alert(formula(multipleInput)+'计算结果是' + multiple(multipleInput));
 break;
 case 4:
 var divideInput = calculateNum(num,mention); 
 alert(formula(divideInput)+'计算结果是' + divide(divideInput));
 break; 
 }
 }while(apply != 5)
 alert('欢迎使用!');
</script>

关于计算器功能实现的更多精彩文章请点击专题:计算器实现 学习查看

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
小程序关于请求同步的总结
May 05 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 #Javascript
JSON获取属性值方法代码实例
Jun 30 #Javascript
JS猜数字游戏实例讲解
Jun 30 #Javascript
vue实现评价星星功能
Jun 30 #Javascript
Json实现传值到后台代码实例
Jun 30 #Javascript
vue实现循环滚动列表
Jun 30 #Javascript
js实现简单音乐播放器
Jun 30 #Javascript
You might like
PHP数据类型之布尔型的介绍
2013/04/28 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHPMailer发送邮件
2016/12/28 PHP
php封装的验证码类分享
2017/02/26 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
js实现微信聊天界面
2020/08/09 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
新闻编辑求职信
2014/04/09 职场文书
升学宴演讲稿
2014/09/01 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
赤壁观后感(2)
2015/06/15 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
利用python做数据拟合详情
2021/11/17 Python
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis
mysql sock 文件解析及作用讲解
2022/07/15 MySQL