<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<style type="text/css">

			*{

				padding: 0;

				margin: 0;

			}

			.wrap{

				width: 400px;

				height: 430px;

				margin: 20px auto;

				border: 1px solid #000;

			}

			input{

				width: 396px;

				height: 26px;

				text-align: right;

			}

			.box{

				padding-top: 10px;

				width: 400px;

				height: 300px;

				text-align: center;

			}

			button{

				width: 25%;

				height: 30px;

				cursor: pointer;

				margin:2px 10px;

			}

		</style>

	</head>

	<body>

		<div class="wrap">

			<input type="text" name="result" id="result" value="" />

			<div class="box">

				<button>1</button>

				<button>2</button>

				<button>3</button>

				<button>4</button>

				<button>5</button>

				<button>6</button>

				<button>7</button>

				<button>8</button>

				<button>9</button>

				<button>0</button>

				<button>+</button>

				<button>-</button>

				<button>*</button>

				<button>/</button>

				<button>=</button>

				<button>back</button>

			</div>

		</div>

	</body>

	<script type="text/javascript">

		var buttonList = document.getElementsByTagName('button');

		var input = document.getElementById('result');

		var dataSource = [];

		for(var i = 0; i < buttonList.length; i++){

			buttonList[i].onclick = function(){

				var str = this.innerHTML;

				if(str == 'back'){

					calcBack();

					return ;

				}else if(dataSource[dataSource.length -1] == '='){

					dataSource = [];  //上一次是=，再点击则清空

				}

				dataSource.push(str);

				dataSource  = handle(dataSource);

				handReult(dataSource);

			}

		}

		function calcBack(){

			var arr = dataSource.join('').split('');

			arr.pop();

			dataSource =  handle(arr);

			handReult(dataSource);

		}

		function show(arr){

			var result = arr.join('');

			input.value = result;

		}

		function handle(newArr){

			var temp = []; //处理好的数据

			var str = '';

			for(var i = 0; i < newArr.length; i++){

				var num = Number(newArr[i]);

				if(num || num === 0){

					//一定是数字

					str = str+newArr[i];

				}else{

					//字符串,过滤重复的  + - * /

					if(str != ''){

						temp.push(str);

						temp.push(newArr[i]);

						str ='';

					}

				}

			}

			if(str != ''){

				temp.push(str);

				str = '';

			}

			//去掉前面的0

			for(var i = 0 ; i < temp.length; i++){

				var num = Number(temp[i]);

				if(num || num == 0){

					temp[i] = Number(temp[i]);

				}

			}

			return temp;

		}

		function handReult(temp){

			temp = JSON.parse(JSON.stringify(temp));

			//判断是否要计算

			if(temp[temp.length-1] == '='){

				var result = calcu(temp);

				temp.push(result);

			}

			//显示

			show(temp);

		}

		function calcu(arr){

			var newArr = JSON.parse(JSON.stringify(arr));  //复制数组，去掉引用

			//计算除法

			while(newArr.indexOf('/') != -1){

				var index = newArr.indexOf('/');

				var num1 = newArr[index-1];

				var num2 = newArr[index+1];

				var result = num1/num2;

				newArr.splice(index-1,3,result);

			}

			//乘法

			while(newArr.indexOf('*') != -1){

				var index = newArr.indexOf('*');

				var num1 = newArr[index-1];

				var num2 = newArr[index+1];

				var result = num1*num2;

				newArr.splice(index-1,3,result);

			}

			//减法

			while(newArr.indexOf('-') != -1){

				var index = newArr.indexOf('-');

				var num1 = newArr[index-1];

				var num2 = newArr[index+1];

				var result = num1-num2;

				newArr.splice(index-1,3,result);

			}

			//加法

			while(newArr.indexOf('+') != -1){

				var index = newArr.indexOf('+');

				var num1 = newArr[index-1];

				var num2 = newArr[index+1];

				var result = num1+num2;

				newArr.splice(index-1,3,result);

			}

			return newArr[0];

		}

	</script>

</html>

　　

js简易计算器底层运算逻辑(带撤销功能)的更多相关文章

  1. Android实训案例(一)——计算器的运算逻辑

    Android实训案例(一)--计算器的运算逻辑 应一个朋友的邀请,叫我写一个计算器,开始觉得,就一个计算器嘛,很简单的,但是写着写着发现自己写出来的逻辑真不严谨,于是搜索了一下,看到mk(没有打广告 ...

  2. JS简易计算器的实现，以及代码的优化

    用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. as3.0划线带撤销功能

    package com{ import flash.display.MovieClip; import flash.display.SimpleButton; import flash.events. ...

  4. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  5. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  6. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 大一C语言学习笔记（10）---编程篇--制作简易计算器，支持加，减，乘，除，取余运算，要求 0 bug

    博主自开学初就一直在努力为自己的未来寻找学习方向,学习编程嘛,尽量还是要抱大腿的,所以我就加入了我们学校的智能设备研究所,别的不说,那的学长们看起来是真的很靠谱,学长们的学习氛围也超级浓厚,所以我就打 ...

  8. 使用html+css+js实现简易计算器

    使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  9. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

随机推荐

  1. c++中map按key和value排序

    ``` #include<iostream> #include<algorithm> #include<vector> #include<map> #i ...

  2. day11 十一、函数对象，名称空间，作用域，和闭包

    一.函数对象 1.函数对象:函数名存放的就是函数的地址,所以函数名也是对象,称之为函数对象 a = 10 print(a,id(a)) def fn(): num = 10 print('fn fuc ...

  3. TOP100summit：【分享实录-美团点评】 业务快速升级发展背后的系统架构演进

    本篇文章内容来自2016年TOP100summit美团●大众点评高级技术专家,酒店后台研发组eHome团队负责人许关飞的案例分享.编辑:Cynthia 许关飞:美团●大众点评高级技术专家,酒店后台研发 ...

  4. ASP.NET Core 实现用户登录验证的最低配置

    背景是在一个项目中增加临时登录功能,只需验证用户是否登录即可,所需的最低配置与实现代码如下. 在 Startup 的 ConfigureServices() 方法中添加 Authentication ...

  5. Windows小技巧 -- 目录内打开CMD的快捷方式

    工作中常常会有需要在某个文件夹内使用cmd的情况,例如运行某脚本,下面演示几种方法. 以进入以下目录操作为例: 方式一 : 常用的cd命令 cd命令是我们平常使用比较多的方式: 1. Win+R打开c ...

  6. POJ 1655 - Balancing Act - [DFS][树的重心]

    链接:http://poj.org/problem?id=1655 Time Limit: 1000MS Memory Limit: 65536K Description Consider a tre ...

  7. [No0000130]WPF 4.5使用标记扩展订阅事件

    自从我上次写到关于标记扩展的时候已经有一段时间了...... Visual Studio 11 Developer Preview的发布给WPF带来了一些新功能,让我有理由再次使用它们.我要在这里讨论 ...

  8. “对外部(局部)变量的访问”是C语言函数指针的最大弱点

    1.“对外部(局部)变量的访问”是C语言函数指针的最大弱点 . #include <stdio.h> #include <stdlib.h> /* 结构体定义 */ struc ...

  9. Flume 在有赞大数据的实践

    https://mp.weixin.qq.com/s/gd0KMAt7z0WbrJL0RkMEtA 原创: 有赞技术 有赞coder 今天 文 | hujiahua on 大数据 一.前言 Flume ...

  10. visual stodio 编译前后动作定制总结

    copy "$(TargetDir)$(TargetName).lib" ..\lib\deploy\$(TargetName).lib 编译完成后将一个.lib 文件拷贝到指定目 ...