早期练手：功能相对比较完善的 js 计算器
第一次发博客，就先发一个自己早期，刚开始学前端时，用js写的一个计算器吧，计算功能比较少，只有 + - * / ，不过其他功能还是比较完善的，比如：
- 输出结果后，连续按"="，可以在已得出的结果上，继续进行刚刚输入算式的最后一项算法。
- 输出结果后，直接按算法符号，可使已得出的结果直接参与到新的算式中。
- 框内可显示输入记录，受限于显示框的长度，只显示最近一次计算的内容。
当然，所谓的完善，也只是相对与网上其他大部分新手在线js计算器~
效果图如上
当时的水平，可以说只会个 if 判断，for 循环处理数组，获取按钮点击事件都还不懂 var 一个变量用来保存。。。
其他不说，这个案例确实锻炼逻辑能力，各种判断，按等于号时，要判断前面是一个算式，还是已经得出的结果，两种结果要执行不同的程序。按计算符号的时候，同样要判断，这个符号前面，是一个刚输入的数，还是上一次运算的结果。甚至按一个数，也要判断前面是否有运算结果，有的话需要清零，没有的话说明前面是计算符号等等。
很耗费脑子，不过也还好。下面就是源代码，直接一个文件，把所有代码复制进一个txt里面，保存编码格式为UTF-8，再改后缀名为html，最后用浏览器打开，就可以看到效果啦。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>计算器-6</title>
<style type="text/css">
body {
background-color: #eff;
}
table {
border-collapse: collapse;
font-size: 1.2em;
float: left;
}
td {
padding: 0px;
color: white;
width: 50px;
height: 50px;
background-color: #777;
text-align: center;
cursor: default;
border: 1px solid #888;
}
td:hover {
background-color: #888;
cursor: pointer;
}
td:active {
background-color: #666;
}
#ok {
background-color: #555;
text-align: right;
padding: 0 10px;
border-top: 3px solid #FF5F29;
overflow: hidden;
font: 14px "微软雅黑";
}
.body {
width: 510px;
overflow: hidden;
margin: 0 auto;
border: 1px dashed #555;
padding: 10px;
background-color: #FAFFFF;
}
.explain {
float: left;
width: 300px;
font: 14px "微软雅黑";
color: #888;
}
.color {
color: #555;
}
dl {
margin-left: 10px;
font-size: 12px;
line-height: 13px;
margin-top: 0px;
}
.dt-1 {
margin-bottom: 5px;
line-height: 15px;
}
dt {
color: #000;
font-weight: 700px;
}
dd {
margin-left: 10px;
padding-left: 15px;
}
ol {
margin: 0px;
padding-left: 0;
}
</style>
</head>
<body>
<br />
<br />
<br />
<div class="body">
<table>
<tr><td colspan="4" id="ok">0</td></tr>
<tr>
<td onclick="num(1)">1</td>
<td onclick="num(2)">2</td>
<td onclick="num(3)">3</td>
<td onclick="aa('+')">+</td>
</tr>
<tr>
<td onclick="num(4)">4</td>
<td onclick="num(5)">5</td>
<td onclick="num(6)">6</td>
<td onclick="aa('-')">-</td>
</tr>
<tr>
<td onclick="num(7)">7</td>
<td onclick="num(8)">8</td>
<td onclick="num(9)">9</td>
<td onclick="aa('*')">*</td>
</tr>
<tr>
<td onclick="num(0)">0</td>
<td onclick="aa('/')">/</td>
<td onclick="cc('C')">C</td>
<td onclick="bb('=')">=</td>
</tr>
</table>
<div class="explain">
<dl>
<dt class="dt-1">【说明】：偶尔出现及细微但很明显的误差，这是二进制算法的误差，非计算器的锅。</dt>
<dt>1.0 <span class="color"></span></dt>
<dd>
<ol>
出现想法，最基本的计算器，功能非常不完善。
</ol>
</dd>
<dt>2.0 <span class="color"></span></dt>
<dd>
<ol>
<li>可以输入到十位、百位、千位、无数位，不再是只能个位数字计算。</li>
<li>可以一次输入多项数字计算，不再是只能计算两个数的加减乘除。</li>
</ol>
</dd>
<dt>3.0 <span class="color"></span></dt>
<dd>
<ol>
<li>输出结果后，连续按"="，可以在已得出的结果上，继续进行刚刚输入算式的最后一项算法。</li>
<li>输出结果后，直接按算法符号，可使已得出的结果直接参与到新的算式中。</li>
</ol>
</dd>
<dt>4.0 <span class="color"></span></dt>
<dd>
<ol>
<li>【更新】：框内可显示输入记录，受限于显示框的长度，只显示最近一次计算的内容。</li>
</ol>
</dd>
</dl>
</div>
</div> <script>
var number = []; //存放输入的数字
var sign = []; //存放输入的算法符号
var time = 0; //存放输入的算法符号的次数
var b=null; //存放计算结果
var c=null; //转存计算结果
var m=null; //存放计算的最后一项算法和最后一项数字，用于连续按等于号的累计计算
var s=null; //存放按过的键的记录，并实时显示。
function num(l) { //此函数用number[]数组，保存输入的数字。
if (time==0&&typeof(s)!="number"&&b!=null) {
s=null; // s是输出按键记录的变量，判断此时是不是一次计算后，新的输入数值计算的开始，是的话，把旧按键记录清零。
b=null; // b是上次计算的结果，此时给他清零。
}
if (number[time]==null) { // 判断number[time]是否为空，如果是，说明输入的是各位，则直接number[time]=l，如果不是，则让原有的数乘以10。加上新的数，变成多位。time为输入算法符号的次数，初始为0。
number[time]=l;
}
else {
number[time]=number[time]*10+l;
}
logs(l); // logs（）用来记录按键并显示。
}
function aa(q) { //此函数用sign[]数组，保存输入的标点符号，且每输入一次算法符号，time加1.
if (b!=null&&time==0) { // b是用来存放计算结果的，如果b中有数，说明刚刚计算完后，没有按数值计算新的算式，而是直接按的算法符号，说明用户想在这个计算结果的基础上继续计算，则把值给c，一会儿用c计算。
c=b;
s=b;
}
sign[time]=q;
time++;
logs(q); // logs()中的s，用来记录按键并显示。
}
function bb() {
if (time==0) { //判断按键次数time是否为0，如果为0，说明此事是刚刚按了等于号，刚刚被清零，则此时需要在已得出的结果上，继续进行刚刚输入算式的最后一项算法。
document.getElementById("ok").innerHTML=(b+m+"="+eval(b+m));
s=b+m+"="+eval(b+m); // s为用来记录按键并显示的变量，算出的结果不是按键，所以需要在这儿专门调用s，把值赋给它，让它记录。
b=eval(b+m); // b是按下等于号，用来放计算结果的变量，此时连续按等于号，需要b累加来存放。
}
else { //如果按键次数不为0，则此时是新的计算过程。
document.getElementById("ok").innerHTML=(s+"="+equation());
s=s+"="+b;
m = sign.pop()+number.pop(); //m用来存放算式的最后一个算法符号和最后一个算数，如果稍后继续安等于号，用来累加。
}
number = []; //清零。
sign = [];
time = 0;
}
function cc() { //清零。
number = [];
sign = [];
time = 0;
b=null;
c=null;
s=null;
document.getElementById("ok").innerHTML=(0);
}
function equation() { //计算用的函数。
var a = 0;
if (c==null) { // c为空，说明此次运算是新的运算，没有上一次运算结果的参与。
for (var i = 0; i < time; i++) {
a=a+number[i]+sign[i];
}
b = eval (a+number[time]);
}
else { // c不为空，说明此次运算是在上一次运算结果的基础上，继续运算。
for (var i = 0; i < time; i++) {
c=c+sign[i]+number[i+1];
}
b = eval (c);
c=null;
}
return b; //返回计算结果。
}
function logs(g) { // 用来记录所按的键并显示的函数。
if (s!=null) {
// s不是空的，就把g转换为字符串，否则，如果用户第一次输入的为两个数。比如11，那么s=s+g，s就变成了2，而不是11.
g=g.toString();
}
// s是空的，则直接s+g，也就是"空+g",而此时g必然是数字，也就是让s等于这个数字。
s=s+g;
document.getElementById("ok").innerHTML=(s);
}
</script>
</body>
</html>
早期练手：功能相对比较完善的 js 计算器的更多相关文章
- 『练手』005 Laura.SqlForever历史遗留 的 架构思想缺陷
005 Laura.SqlForever历史遗留 的 架构思想缺陷 我们 比较一下 Laura.WinFramework 和 Laura.XtraFramework 的差异: Laura.WinFra ...
- Xamarin入门，开发一个简单的练手APP
之前周末用Xamarin练手做了个简单APP,没有啥逻辑基本就是个界面架子,MVVM的简单使用,还有Binding,Command的简单使用,还有一个稍微复杂点两个界面交互处理(子页面新增后关闭,父页 ...
- Python练手项目实例汇总（附源码下载）
今天给大家分享几个有趣的Python练手项目实例,希望对Python初学者有帮助哈~ 一.经典的俄罗斯方块 1. 绑定功能 1 # 绑定功能 2 class App(Frame): 3 def _ ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- webpack练手项目之easySlide（三）：commonChunks（转）
Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...
- webpack练手项目之easySlide（二）：代码分割（转）
在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...
- webpack练手项目之easySlide（一）：初探webpack （转）
最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力. webpack是一个前端的打包管理工具,大家可以前往:http:/ ...
- Python之路【第二十四篇】：Python学习路径及练手项目合集
Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...
- 仿PC版微信的练手项目（可实时通讯）
仿PC版微信的DEMO 本项目是由一个仿PC版微信的vue前端项目,和一个使用leancloud进行数据存储的.提供WebSocket的node后端项目构成. 本项目使用的技术栈:vue + vue- ...
随机推荐
- 在IntelliJ IDEA 13中配置OpenCV的Java开发环境
准备工作: 下载IDEA 13(这里以版本13为例,后面简称IDEA): 下载Java JDK(用于配置基本的Java开发环境): 下载OpenCV 2.4.9(这里以版本2.4.9为例,据这篇文章说 ...
- github fork, star and watch
1 git fork git clone原版本的话,只有读权限,是不能直接把修改提交到服务器的. git fork会创建一个副本,然后就可以在这个上面进行开发了,开发了之后可以通过pull reque ...
- java(jdk1.7) IO系列01之InputStream和OutputStream解析
1.InputStream和OutputStream简介 在java中InputStream和OutputStream分别代表字节输入流和字节输出流,表示以字节的方式来实现进程或者程序的通信,Inpu ...
- 四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样
去年折腾的一个东西,之前 blog 里也写过,不过那时边琢磨边写,所以比较杂乱,现在简单完整地讲解一下. 前言 当时看到一本虚拟机相关的书,正好又在想 JS 混淆相关的事,无意中冒出个问题:能不能把某 ...
- mysql之连接localhost与127.0.0.1的区别
引言 在聊天群里看到有人提到 mysql 中 localhost 和 127.0.0.1 的区别,这个之前并没有仔细考虑过.现在来学习下. localhost 与 127.0.0.1 区别 local ...
- WebGIS前端瓦片地图显示原理及实现
目前,有很多WebGIS开发包,ArcGIS API for JS.OpenLayers.LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能.我们很方便的使用这些库的时候,也让我们 ...
- 【解题报告】VijosP1448校门外的树（困难版）
原题: 校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的--如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现有两个操作:K=1,K=1,读入l.r ...
- 【杂】poj2482 Stars in Your Windows 题面的翻译
原地址:http://poj.org/problem?id=2482 神题,被誉为最浪漫的题目,一位acmer以自己独特的方式写下的殷殷情语 你窗前的星星 纵时光飞逝如梭,也我对你的回忆也永不黯然.从 ...
- 3522: [Poi2014]Hotel
3522: [Poi2014]Hotel Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 253 Solved: 117[Submit][Status ...
- java开发之阿里云对象存储OSS和云数据库Memcache的使用
web开发中标配:aliyun ECS(阿里云服务器),aliyun RDS(阿里云数据库),aliyun OSS(阿里云对象存储),aliyun Memcache(阿里云缓存数据库). 今天就介绍下 ...