js简易计算器底层运算逻辑(带撤销功能)
<!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简易计算器底层运算逻辑(带撤销功能)的更多相关文章
- Android实训案例(一)——计算器的运算逻辑
Android实训案例(一)--计算器的运算逻辑 应一个朋友的邀请,叫我写一个计算器,开始觉得,就一个计算器嘛,很简单的,但是写着写着发现自己写出来的逻辑真不严谨,于是搜索了一下,看到mk(没有打广告 ...
- JS简易计算器的实现，以及代码的优化
用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- as3.0划线带撤销功能
package com{ import flash.display.MovieClip; import flash.display.SimpleButton; import flash.events. ...
- 用js制作简易计算器及猜随机数字游戏
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 原生JS实现简易计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 大一C语言学习笔记（10）---编程篇--制作简易计算器，支持加，减，乘，除，取余运算，要求 0 bug
博主自开学初就一直在努力为自己的未来寻找学习方向,学习编程嘛,尽量还是要抱大腿的,所以我就加入了我们学校的智能设备研究所,别的不说,那的学长们看起来是真的很靠谱,学长们的学习氛围也超级浓厚,所以我就打 ...
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- 项目：JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解 的 项目:JS实现简易计算器案例
随机推荐
- Android超精准计步器开发-Dylan计步（申明：来源于网路）
Android超精准计步器开发-Dylan计步(申明:来源于网路) 拿来借鉴学习,向原创者... 地址:http://blog.csdn.net/linglongxin24/article/detai ...
- 树剖+线段树||树链剖分||BZOJ2238||Mst
题面:https://www.lydsy.com/JudgeOnline/problem.php?id=2238 思路:先求个最小生成树,然后就对最小生成树上的边做树剖,依次对非树边进行处理,维护非树 ...
- MS14-064 漏洞测试入侵——20145301
MS14-064 漏洞测试入侵 Microsoft Windows OLE远程代码执行漏洞,OLE(对象链接与嵌入)是一种允许应用程序共享数据和功能的技术 执行摘要 此安全更新可解决 Microsof ...
- sql join 语句的小总结
CREATE TABLE Persons ( id INT PRIMARY KEY, LastName CHAR() NOT NULL, FirstName VARCHAR (), address V ...
- [No0000179]改善C#程序的建议2：C#中dynamic的正确用法
dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...
- [No000013B]初识Ildasm.exe——IL反编译的实用工具
Ildasm.exe 概要: 一.前言: 微软的IL反编译实用程序——Ildasm.exe,可以对可执行文件(ex,经典的控制台Hello World 的 exe 可执行文件)抽取出 IL 代码,并且 ...
- tensorflow scope的作用
我们在使用tensorflow的时候,当你想复用一个函数的模块,调试时候回提示你变量已经出现,提示你是否重用.那我们当然是不重用的,因为每一个变量都是我们需要的. 要体现不同,就在不同的变量中使用na ...
- In abstract algebra, a congruence relation (or simply congruence) is an equivalence relation on an algebraic structure (such as a group, ring, or vector space) that is compatible with the structure in
https://en.wikipedia.org/wiki/Congruence_relation In abstract algebra, a congruence relation (or sim ...
- Java与面向对象之随感(1)
大一下学期上完了c++课程,当时自我感觉很良好,认为对面向对象编程已经是身经百战了,但是上了院里HuangYu老师的Java课之后,才发现自己对于面向对象的编程风格的理解只在皮毛,着实惭愧不已. 假设 ...
- vmware为我们提供了三种网络工作模式，它们分别是：Bridged（桥接模式）、NAT（网络地址转换模式）、Host-Only（仅主机模式）。
原文来自http://note.youdao.com/share/web/file.html?id=236896997b6ffbaa8e0d92eacd13abbf&type=note 我怕链 ...