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

　　附：   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实现轻量级计算器的更多相关文章

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

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

  2. html+css+js实现科学计算器

    代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...

  3. js加减乘除在线计算器代码

    js加减乘除在线计算器代码 在线演示本地下载

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

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

  5. js实现简单计算器

    效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵. 代码: <!DOCTYPE html><html><head> < ...

  6. html、css、js实现简易计算器

    学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...

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

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

  8. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

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

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

随机推荐

  1. 百度网盘免费扩容 免费扩容到2048G

    您可以用手机端扩容 http://yun.baidu.com/1t 免费扩容到2048G

  2. Hibernate框架Criteria查询

    本文章适合一些初学者 一.使用Criteria查询数据        1.条件查询            1.1:使用Criteria查询的步骤                    1.使用Sess ...

  3. Oracle 数据库启用归档

    一.关闭数据库 二.启动数据库到mount状态 三.启用或停止归档模式 启用 停用 四.开启数据库并查看归档模式 参考文档:http://blog.csdn.net/feifei_86/article ...

  4. 解决VS2015 VBCSCompiler.exe 占用CPU100%的问题

    使用VS2015重复编译运行会发现系统运行缓慢甚至卡死,打开windows任务管理器可以发现CPU已经飙到了100%, VBCSCompiler.exe进程出现多个实例并且占用了大量CPU. 解决方案 ...

  5. ajax 实现页面加载和内容的删除

    ajax最大的好处就在于加载和删除的时候不会跳转页面,现在的网页大多都会选择用ajax来写,相比嵌入PHP代码来说减少了代码量,同时加载页面也会比较快,  下面是用ajax以数据库fruit表为例写的 ...

  6. 或许是介绍Android Studio使用Git最详细的文章

    欢迎访问我的个人博客转发请注明出处:http://www.wensibo.top/2017/03/12/GitOnAS/ 前言 本文较长,图片很多很多,流量党慎入 使用Git已经有一段时间了,但是之前 ...

  7. 从零开始学习Vue.js，学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  8. checkSelfPermission 找不到 Android 动态权限问题

    checkSelfPermission 找不到 Android 动态权限问题  最近写了一个Demo,以前好好地.后来手机更新了新系统以后,不能用总是闪退.而且我的小伙伴的是android 7.0系统 ...

  9. "the hypervisor is not running" 故障

    在我们日常服务器管理中,常常会遇到创建虚拟机,如果在一台新部署的 Hyper-V 上新建一个 Virtual Machine 时,出现错误信息:"The virtual machine co ...

  10. spring boot gradle build：bootRepackage failed

    When running 'gradle clean build' on my spring boot project (version 1.3.6.RELEASE) on windows 10 (a ...