JS实现轻量级计算器

　　想尝试做一个网页版计算器后，参考了很多博客大神的代码，综合归纳、总结修改，整理如下文。

　　附： Demo 源码

一、HTML+CSS

　　具体结构样式如下图，基本参照手机计算器界面。按钮功能可以查看demo，都可以实现。

　　这部分布局不是重点，只附上代码以便理解JS行为。

　　HTML/结构：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS实现轻量级计算器</title>

    <link href="css/style.css" type="text/css" rel="stylesheet" />

    <script src="js/script.js" type="text/javascript" rel="stylesheet"></script>

</head>

<body>

<div id="box">

    <div id="top">

        <p>Lightweight Calculator by PYJ</p>

        <input id="screen0" type="text" style="margin-top: 100px;" disabled/>

        <input id="screen1" type="text" style="margin-top: 190px;" disabled/>

    </div>

    <div id="main">

        <span class="div1" style="font-size: 26px">(</span>

        <span class="div1" style="font-size: 26px">)</span>

        <span class="div1" style="font-size: 26px">DEL</span>

        <span class="div1">/</span>

        <span class="div2">7</span>

        <span class="div2">8</span>

        <span class="div2">9</span>

        <span class="div1">*</span>

        <span class="div2">4</span>

        <span class="div2">5</span>

        <span class="div2">6</span>

        <span class="div1">-</span>

        <span class="div2">1</span>

        <span class="div2">2</span>

        <span class="div2">3</span>

        <span class="div1">+</span>

        <span class="div2">0</span>

        <span class="div2">.</span>

        <span class="div1">C</span>

        <span class="div3" style="width: 94px;background: orangered;">=</span>

    </div>

</div>

</body>

</html>

　　CSS/表现：

*{

    margin: 0;

    padding: 0;

    font-family: "Consolas", "Menlo", "Courier", monospace;

}

span{display: block;}

body{background: #f0f2f1;}

#box{

    width: 380px;

    height: 675px;

    margin-top: 8px;

    margin-left: auto;

    margin-right: auto;

    box-shadow:0 0 10px #888;

}

#top{

    width: inherit;

    height: 285px;

    background: #333333;

    position: relative;

}

#top p{

    color: #e7e7e7;

    font-size: 16px;

    padding-top: 5px;

    padding-right: 10px;

    text-align: right;

}

#top input{

    width: 368px;

    height: 70px;

    position: absolute;

    color: #e8e8e8;

    background: none;

    border: none;

    font-size: 35px;

    text-align: right;

    line-height: 70px;

    cursor: text;

    padding-right: 10px;

}

#main{

    width: inherit;

    height: 390px;

    background: #f0f2f1;

}

#main span{

    width: 94px;

    height: 77px;

    border-right: 1px solid #dff0d8;

    border-top: 1px solid #dff0d8;

    float: left;

    font-size: 32px;

    text-align: center;

    line-height: 80px;

    cursor: pointer;

}

.div1{color: orangered;}

.div2{color: #000;}

.div3{border-right: none;color: #fff;}

#main span:hover{background: #e1e1e1;}

#main span:active{box-shadow: 0 0 5px 5px #fff;}

二、JavaScript/行为

　　行为层要解决的问题大致可以总结为：获取被点击的按钮内容，给出相应反应或组成表达式；计算表达式并显示。

1. 初始化（清屏）：

 window.onload = function(){

     var screen0 = document.getElementById('screen0'),   //获取上显示器内容

         screen1 = document.getElementById('screen1');   //获取下显示器内容

     screen0.value = null;

     screen1.value = null;

     calculate(screen0, screen1);

 };

2. 上面代码最后一行调用了calculate()函数，获取按钮字符：

 function calculate(screen0,screen1){

     var box = document.getElementById('main'), //获取按钮盒子

         count = 0;                             //记录显示器字符或数字个数

     box.onclick = function(e){

         var symbol = e.target.innerText;       //获取按钮字符

         //内容是否超过允许长度

         if((screen1.value + symbol).length > 40){

             alert('Content exceeds the maximum length!');

             return null;

         }

         if(symbol == 'C' ){          //清零

             count = 0;

             screen0.value = null;

             screen1.value = null;

         }else if(symbol != '='){     //表达式

             if(count == -1){         //对上一次计算的清空

                 screen0.value += "=" + screen1.value;

                 screen1.value = symbol;

                 count = 1;

             }else if(symbol == 'DEL'){

                 if(screen1.value == null){

                     count = 0;

                 }else{

                     screen1.value = screen1.value.slice(0,-1);

                     count--;

                 }

             }else{

                 screen1.value += symbol;

             }

         }else if(symbol == '='){    //计算结果

             screen0.value = screen1.value;

             screen1.value = test(screen1.value );

             count = -1;

         }

     }

 }

　　分别对清零、回删、“=”和其他字符情况做出判断，给予不同的处理结果。

3. 按了“=”，就表示要对前面的字符串进行计算了：

　　但在计算前，需要了解一下JS数字精度丢失的问题。计算机的二进制的实现和位数限制会使部分数无法有限表示，有穷的数在计算机的二进制里却是无穷的，因存储位数的限制而发生的“舍去”，就导致了精度的丢失。具体内容不再展开，可以去查看相关文档。

　　为了解决浮点数的精度丢失问题，在这里为Math对象定义了一个方法：

 Math.formatFloat = function (exp, digit){

     var m = Math.pow(10, digit);

     return parseInt(exp*m, 10)/m;

 };

     //把小数放到位整数（乘倍数），再缩小回原来倍数（除倍数）

　　计算器最核心的算法就是表达式的运算。

　　本文的思想是，将表达式按符号拆分并运用递归：

 function test(text) {

     var index = 0;   //记录符号索引

     while(text){

         //首先计算括号内内容

         if(text.lastIndexOf("(") > -1){

             index = text.lastIndexOf("(");

             var endIndex = text.indexOf(")", index);

             if(endIndex > -1) {

                 var result = Math.formatFloat(test(text.substring(index + 1, endIndex)) ,2);

                 return Math.formatFloat(test(text.substring(0, index) + result + text.substring(endIndex + 1)) ,2);

             }

         }else if(text.indexOf("+") >-1){

             index = text.indexOf("+");

             return Math.formatFloat(test(text.substring(0, index)) + test(text.substring(index + 1)) ,2);

         }else if(text.lastIndexOf("-") > -1){

             index = text.lastIndexOf("-");

             if(text[index-1] == '*'){

                 return Math.formatFloat(test(text.substring(0, index-1)) * test(text.substring(index)) ,2);

             }else if(text[index-1] == '/'){

                 return Math.formatFloat(test(text.substring(0, index-1)) / test(text.substring(index)) ,2);

             }else{

                 return Math.formatFloat(test(text.substring(0, index)) - test(text.substring(index + 1)) ,2);

             }

         }else if(text.lastIndexOf("*") > -1){

                 index = text.lastIndexOf("*");

             return Math.formatFloat(test(text.substring(0, index)) * test(text.substring(index + 1)) ,2);

         }else if(text.lastIndexOf("/") > -1){

             index = text.lastIndexOf("/");

             return Math.formatFloat(test(text.substring(0, index)) / test(text.substring(index + 1)) ,2);

         }else{

             return Math.formatFloat(text,2);

         }

     }

     return null;

 }

　　需要注意：首先对括号内内容进行运算；“-” 号和除号要从表达式尾部开始提取，否则计算有误；“-” 号有负号和减号之分，解决办法是，在 “-” 号前有乘号和除号时，要按乘号或除号拆分；Math.formatFloat() 方法的运用。

使用效果图如下，存在bug或者文中有错误的话希望指出 [抱拳]

JS实现轻量级计算器的更多相关文章

使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
html+css+js实现科学计算器
代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...
js加减乘除在线计算器代码
js加减乘除在线计算器代码在线演示本地下载
项目：JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解的项目:JS实现简易计算器案例
js实现简单计算器
效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵. 代码: <!DOCTYPE html><html><head> < ...
html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
用js制作简易计算器及猜随机数字游戏
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
用js制作一个计算器
使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...
原生JS实现简易计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

jeesite简单入口分析
这两天要开新项目 , 准备使用比较受欢迎的 jeesite框架 . jeesite是一个写好的网站 , 用到的框架比较多具体请看 -- > github链接下载下来之后 , 手动把maven ...
mysql之连接localhost与127.0.0.1的区别
引言在聊天群里看到有人提到 mysql 中 localhost 和 127.0.0.1 的区别,这个之前并没有仔细考虑过.现在来学习下. localhost 与 127.0.0.1 区别 local ...
C++拷贝构造&操作符重载
头文件 DString.h如下 #ifndef __DSTRING_H #define __DSTRING_H #endif #include <stddef.h> class DStri ...
Visual Studio 2017正式版发布全纪录
又是一年发布季,微软借着Visual Studio品牌20周年之际,于美国太平洋时间2017年3月7日9点召开发布会议,宣布正式发布新一代开发利器Visual Studio 2017.同时发布的还有 ...
Java设计模式之《职责链模式》及应用场景
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6530089.html 职责链模式(称责任链模式)将请求的处理对象像一条长链一般组合起来,形 ...
bat文件的一些小技巧
bat文件的简介: bat文件是dos下的批处理文件.批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd.在命令提示下键入批处理文件的名称,或者双击该批处理文 ...
小白该怎么学《马哥Linux从入门到精通》
首先,必须说明我已经不是小白啦~现在的我在国内某独角兽担任运维工程师,带着一个四人小团队,在运维方面也算是有些心得,勉强过来回答一下这个问题,就算抛砖引玉了. 所有人都是从小白阶段过来的,我=也经历过 ...
从Hash Killer I、II、III论字符串哈希
首先,Hash Killer I.II.III是BZOJ上面三道很经典的字符串哈希破解题.当时关于II,本人还琢磨了好久,但一直不明白为啥别人AC的代码都才0.3kb左右,直到CYG神犇说可以直接随机 ...
Cesium原理篇：3D Tiles（2）数据结构
上一节介绍3D Tiles渲染调度的时候,我们提到目前Cesium支持的Cesium3DTileContent目前支持如下类型: Batched3DModel3DTileContent Instanc ...
.NET Core项目从xproj+project.json向csproj迁移简介
3月7日,微软发布了Visual Studio 2017 RTM,与之一起发布的还有.NET Core Runtime 1.1.0以及.NET Core SDK 1.0.0,尽管这些并不是最新版,但也 ...

JS实现轻量级计算器

JS实现轻量级计算器的更多相关文章

随机推荐

热门专题