系列文章

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

综合运用HTML，CSS，JavaScript技术，完成网页计算器案例的学习，实现JavaWeb前端开发能力的提升。主要工作有：

1. 采用Div+CSS样式实现页面布局
2. JavaScript实现计算器业务逻辑

---

一、网页计算器设计目标

网页计算器前端界面展示效果，包括数字和符号按钮，其中符号按钮分为运算符号按钮（+，-，*，/,%）和功能按钮(“”<-“”退格，C-清除键，=）。运算结果显示在SUM：后的文本框中。

二、前端界面设计

CSS样式定义

通过DIv实现页面布局

1.大框

计算器框体结构定义：
display：block //display是控件的css属性之一，表示的是显示模式。none表示不显示在网页上，但是代码存在;bolck是此元素将显示为块级元素，此元素前后会带有换行符。

2.数字显示框

其中上面一行用来显示点击的按钮值，下面一行用来显示计算结果，两者样式大致相同，区别在与下一行的文本框长度小一些，并且通过长度Width属性，控制两个文本框右对齐。

布局属性如下图所示

3.按钮框

布局属性如下图所示

以上所述DIV样式的源代码如下

// .为类的引用，#为id引用

    <style type="text/css">
        #box{width: 295px; margin: 0 auto; text-align: justify; border: 1px solid #ddd; padding: 15px;}
        .d_num{display: inline-block; margin:  10px; width: 33px; height: 30px; 
        		border: 1px solid #ddd; text-align: center; line-height: 30px; cursor: pointer;}
        .sum{margin: 0 10px 10px; line-height: 30px; font-size: 20px;}
        #sum{width: 205px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
        #process{width: 255px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
    </style>

思考：如何在一行里显示多个按钮？
用Div+Span实现

在Div中嵌套span

Div页面布局及样式引用

本项目采用在HTML文档内定义内部样式表，现梳理一下样式引用的方法：

类型	选择符
class	.
id	#
html	HTML标记符

三、计算器功能设计

1.功能概述

实现计算器的基本功能：
，先输入第一个数，再输入运算符，接着输入第二个数，最后点击“=”，计算结果在sum文本框中显示，表达式在第一个文本框中显示。

1. 程序捕获鼠标点击按钮值
2. 正常流程，先输入第一个数，再输入运算符，接着输入第二个数，最后点击“=”，计算结果在sum文本框中显示，表达式在第一个文本框中显示。
3. 当输入功能键 C时，清空所有数值，重新开始。
4. 当输入退格键 <- 时，删除一个代表数字的字符，如果符号在数字之后，则连同符号一并删除。如果没有代表输入数字符号，则不做任何处理。
5. 允许输入小数。

2.流程图

3.JavaScript代码示例

捕获点击按钮

代码如下（示例）：

    var $box = document.getElementById('box');
    var $sum = document.getElementById('sum');
    var $process = document.getElementById('process');
    var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false;
    $box.onclick = function(e){
        var event = window.event || e;
        var ele = event.srcElement || event.target;
        var _className = ele.className;

首先获取页面控件，存入以$命名的变量中。再定义控件点击事件，获取点击控件的className值。根据className值判断其实数字还是符号，用于下面逻辑功能的实现。

计算逻辑实现

逻辑代码显示如下（示例）：

<script type="text/javascript">
    var $box = document.getElementById('box');
    var $sum = document.getElementById('sum');
    var $process = document.getElementById('process');
    var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false;
    $box.onclick = function(e){
        var event = window.event || e;
        var ele = event.srcElement || event.target;
        var _className = ele.className;
        if(_className == 'd_num'){
            var num = ele.getAttribute('data-num');//点击的按钮对应的值
            var NotNum = isNaN(num);
            if(!NotNum || num == '.'){ //点击了数字
                if(!statu){ //还没点击过符号
                    if(num1 == '0'){
                        num1 = '';
                    }
                    num1 += num;
                    process = num1;
                }else{ //已经点击过符号
                    if(num2 == '0'){
                        num2 = '';
                    }
                    num2 += num;
                    process = num1 + temp + num2;
                }
                $process.value = process;
            }
            else{ //点击了符号
                if(num1 == ''){//非法操作
                    return false;
                }
                if(num == 'C'){//归零
                    num1 = '';
                    num2 = '';
                    process = '';
                    temp = '';
                    sum = '';
                    $process.value = '0';
                    $sum.value = '0';
                    statu = false;
                    return false;
                }
                if(num == '<-'){//退档
                    if(sum != ''){
                        return false;
                    }
                    if(num2 == ''){
                        num1 = num1.substring(0,num1.length-1);
                        if(num1 == ''){
                            num1 = '0';
                        }
                        process = num1;
                        $process.value = process;
                    }else{
                        num2 = num2.substring(0,num2.length-1);
                        if(num2 == ''){
                            num2 = '0';
                        }
                        process = num1 + temp + num2;
                        $process.value = process;
                    }
                    return false;
                }
                if(num2 != ''){//a&b
                    if(num == '='){//元操作到此结束
                        $process.value = process;
                    }else{
                        $process.value = process + num;
                    }
                    switch(temp){//元操作继续
                        case '+' : sum = parseFloat(num1) + parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
                        case '-' : sum = parseFloat(num1) - parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
                        case '*' : sum = parseFloat(num1) * parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
                        case '/' : sum = parseFloat(num1) / parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
                        case '%' : sum = parseFloat(num1) % parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
                    }
                }else{//a&？
                    if(num == '='){
                        return false;
                    }
                    $process.value = process + num;
                    process = '';
                }
                if(num == '='){
                    sum = '';
                    statu = false;
                    return false;
                }
                temp = num;//记录操作符
                statu = true;//已经触发操作状态
            }
        }
    };
</script>

---

总结

以上介绍了网页计算器的实现过程。现将技术点总结如下：

1. 采用Div+CSS样式实现页面布局
2. JavaScript实现计算器业务逻辑
3. 重点在于掌握JavaScript语法，捕获鼠标点击事件的方法。
4. 难点在于计算器业务逻辑的梳理与编程实现。