JS简易计算器实例讲解

2024-10-03 02:04:05

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

简易计算器：

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

<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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS制作简易计算器的实例代码

做一个简易计算器,效果图片 c表示清空,为一个空字符串 +/-表示该值为正还是负 %表示当前值/100 ←表示退格,往前删除一个值 eval 函数是能够计算出字符串表达式或者语句的结果,把结果求出来. 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"
JS原型对象操作实例分析

本文实例讲述了JS原型对象操作.分享给大家供大家参考,具体如下: 万物皆对象,函数也同样是对象,是特殊的函数对象 function fn() {} let a = new fn(); let b = new Function() console.log(typeof a); // object console.log(typeof b); // function 打开浏览器,输入fn,会发现fn有一个prototype(原型)属性,这个属性是一个指针,指向原型对象,这个对象包括了特定类型所有共享
JavaScript多种图形实现代码实例

1．小星星设有如下的曲线参数方程: N=5 x = r*sin(nθ)*cos(θ) y = r*sin(nθ)*sin(θ) (0≤θ≤2π) 用循环依次取θ值为0~2π(每次增量为π/64),计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个一个5瓣花卉图案. 编写如下的HTML代码. <!DOCTYPE html> <head> <title>小星星</title> <script type="text/ja
Json实现传值到后台代码实例

1.定义一个键值对对象 function ObjData(key,value){ this.Key=key; this.Value=value; } 2.在点击表单的提交buttom的方法中: var list=document.getElementById("myForm").getElementsByTagName("input");//查询form下的所有input标签 var array=[]; //定义一个对象数据存放每一个input的键值对(input
Json字符串转Java对象和List代码实例

对象POJO和JSON互转 public class JsonUtil { /** * JSON 转 POJO */ public static <T> T getObject(String pojo, Class<T> tclass) { try { return JSONObject.parseObject(pojo, tclass); } catch (Exception e) { log.error(tclass + "转 JSON 失败"); } re
JS猜数字游戏实例讲解

本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下猜数字游戏: 1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏答案 2)输入数字进行判断,共有10次输入机会 3)若大于答案数字,则提示猜大了,若小于答案数字,则提示猜小了 4)直至10次机会用完或者猜对答案了,则结束游戏 <script type="text/javascript"> // 猜数字案例 function guessTip(min, max) { min =
JS实现联想、自动补齐国家或地区名称的功能

1.JS部分 function autocomplete(inp, arr) { /*函数主要有两个参数:文本框元素和自动补齐的完整数据*/ var currentFocus; /* 监听 - 在写入时触发 */ inp.addEventListener("input", function(e) { var a, b, i, val = this.value; /*关闭已经打开的自动完成值列表*/ closeAllLists(); if (!val) { return false;}
通过实例了解JS执行上下文运行原理

壹 ❀ 引我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.log('听风是风'); }; f1(); //echo function f1() { console.log('echo'); }; f1(); //echo 按照代码书写顺序,应该先输出听风是风,再输出 echo才对,很遗憾,两次输出均为 echo:如果我们将上述代码中的函数声明改为函数表达式,结
实例讲解JavaScript 计时事件

JavaScript 计时事件通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. 在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setInterval() - 间隔指定的毫秒数不停地执行指定的代码. setTimeout() - 在指定的毫秒数后执行指定代码. 注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法. setInt
JS简易计算器实例讲解

本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下简易计算器: 1)选择需要运算的类型,输入对应的数字 2)输入需要参与运算的数字 3)输入"计算"二字,进行运算后,显示运算结果及运算表达式 <script type="text/javascript"> // 加法运算 function plus(arrPlus){ var sum = 0; for(var i = 0 ; i < arrPlus.length ; i++
超级简易的JS计算器实例讲解(实现加减乘除)

废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> body{ margin: 0; } .tab{ border: 3px solid black ; border-radius: 2px; border-collapse:collapse; width: 268p
基于require.js的使用(实例讲解)

本篇文章总结下require.js使用方法. 1.为什么使用require.js? 使用之前,我的页面的js是这样的 <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script>
js链表操作(实例讲解)

如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function Node(v){ this.value=v; this.next=null; } function ArrayList(){ this.head=new Node(
js图片放大镜实例讲解(必看篇)

1.图片放大镜的思路: 当打开页面时只有图片首先,说一下基本效果和调理,图片放大镜,也就是当你鼠标移入当前的商品图片时,会出现一个小灰色的观察移动框,有点会出现一个对应部位的放大的图片. 然后当鼠标移动时,右边的放大镜会出现对应部位的放大图片最后当鼠标移开后,小的观察框和放大的图片都会消失. 2.有了基本思路就看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti
JS简单计算器实例

本文实例讲述了JS简单计算器的实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function sum() { //js
Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
C#日历样式的下拉式计算器实例讲解

本文介绍了如何在Visual Studio中创建用户控件来显示下拉式计算器,弹出效果类似于日历控件. 介绍如果我们正在做一个类似于库存控制和计费系统的项目,有些部分可能必须手动计算数值.因此,用户就不得不使用计算器得到结果,再填入到输入字段中,或者在工作窗口上单独打开一个计算器窗口.总之,各种不便和麻烦. 这篇文章主要描述的是如何添加下拉式计算器到DataGridView单元格中,如下图: 使用代码第一步,我们必须先创建一个函数计算器,并且能够使用控件.因此,不妨先创建一个Visual St
javascript编写简易计算器

本文实例为大家分享了js简易计算器的具体代码,供大家参考,具体内容如下代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style type="text/css"> *{ margin:0; padding: 0; } .conten

JS简易计算器实例讲解

相关推荐

随机推荐