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

　　附：   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. 业务逻辑 : forex & mlm

    业务逻辑 公司通过mlm的制度和顾客进行签约来收取资金,再把资金给第三方公司进行投资,再把所投资的回报给分配给公司和顾客. 公司的资金来自投资者,公司的营销策略来自mlm的制度,由市场人员来创建mlm ...

  2. windows 安装 Scrapy的套路

    我最近在琢磨scrapy爬虫框架,在windows中安装scrapy遇到了不少坑:直接 pip install scrapy 安装不成功的,百度说要安装vc2008+等等,安装这些时间太长,最后找到一 ...

  3. setTimeout的妙用2——防止循环超时

    上个周日,介绍了如何使用setTimeout代替setInterval进行间歇调用,这个周日,继续来讲<JavaScript高级程序设计>这本书里面,对于setTimeout的另一种妙用- ...

  4. Strtus2 S2-045漏洞

    S2-045漏洞已经爆发几天了,但还很多网址都存在此漏洞,很多金融类网站也收到了保护费通知...唉,收保护费少,报警无效!只能酌情处理了!做黑产的,还是少做为秒,常在河边站哪有不湿鞋,劝各位早日金盆洗 ...

  5. 通过 Composer Github Packagist制作发布共享PHP包

    参考来源: https://laravel-china.org/topics/1002 https://rivsen.github.io/post/how-to-publish-package-to- ...

  6. 1709: [Usaco2007 Oct]Super Paintball超级弹珠

    1709: [Usaco2007 Oct]Super Paintball超级弹珠 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 339  Solved:  ...

  7. Spring+SpringMVC+MyBatis+easyUI整合基础篇（十）SVN搭建

    日常啰嗦 前面一篇文章讲了一下版本控制,但其实这一篇并没有打算讲细节的,感觉应该自己去动手弄一下,后来考虑了一下,版本控制真的挺重要的,如果自己实在搭建不好反而不去使用的话,真的有点可惜,当然这些话是 ...

  8. Git-多人协作

    声明: 此文参考廖雪峰老师的官方网站知识总结http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017 ...

  9. Java基础一：面向对象的特征

    经过16年校招,自己在Java基础方面也算有了一个质的飞跃,从原来知其然,到现在知其所以然,现将学习心得总结于此. 首先需要知道类和对象是什么? 维基百科定义类为: an extensible pro ...

  10. StudyJams学习历程总结

    Study Jams 是一个学习 Google 在线课程的活动.该活动由学员自发组建课程学习小组,旨在带领小组成员入门 Android 开发,最终将 Android App 上载至 Google Pl ...