Javascript编程训练

1.实验准备

熟悉JavaScript语法；
查看JavaScript教程：
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
熟悉js在浏览器的编程和调试

2.实验内容

在一个客户端网页中，制作一个网页版本的<b>计算器</b>（类似于windows自带的计算器）,参照下图所示：

image
要求：结合CSS进行网页设计；可以基于其他语言的代码进行修改；但尽量采用面向对象的编程方法。

3.实验环境

Visual Studio 2017
360浏览器

4.实验步骤

一、设计准备

1、在我们开始打代码前先来对我们的计算器分一下区，画一个草图，以便更好进行css排版：

image

这里我仿照windows自带的计算器将自己要制作的网页计算器进行了分区，显示区用于显示计算的式子以及结果，功能区主要是一些运算符，数字区主要是数字按键。

2、接着我们考虑要实现的基本功能，这里我主要实现标准模式下的计算器功能，包括%、CE、C、Del、1/x、x²、√、/、*、-、+、=这几个基本运算符以及“+/-”、“.”、等。

二、计算器html框架

1、在进行基本的设计后，在Visual Studio 2017中创建一个html文件，首先先搭建一个计算器的大框架jsj:

<div id="jsj">
</div>

2、接着我们再搭建一个显示区screen,记得在最后加上<br/>实现换行:

<input class="screen" type="text" disabled /><br />

3、然后是功能区的按钮but_ac but和数字区的按钮but:

    <input class="but_ac but" type="button" value="%" />
    <input class="but_ac but" type="button" value="CE" />
    <input class="but_ac but" type="button" value="C" />
    <input class="but_ac but" type="button" value="Del" /><br />
//上面四行是计算器上第一行的功能区
    <input class="but_ac but" type="button" value="1/x" />
    <input class="but_ac but" type="button" value="x²" />
    <input class="but_ac but" type="button" value="√" />
    <input class="but_ac but" type="button" value="/" /><br />
//上面四行是计算器上第二行的功能区
    <input class="but" type="button" value="7" />
    <input class="but" type="button" value="8" />
    <input class="but" type="button" value="9" />
    <input class="but_ac but" type="button" value="*" /></br>
//上面四行是计算器上第三行的数字区+功能区
    <input class="but" type="button" value="4" />
    <input class="but" type="button" value="5" />
    <input class="but" type="button" value="6" />
    <input class="but_ac but" type="button" value="-" /><br />
//上面四行是计算器上第四行的数字区+功能区
    <input class="but" type="button" value="1" />
    <input class="but" type="button" value="2" />
    <input class="but" type="button" value="3" />
    <input class="but_ac but" type="button" value="+" /><br />
//上面四行是计算器上第五行的数字区+功能区
    <input class="but" type="button" value="+/-" />
    <input class="but" type="button" value="0" />
    <input class="but" type="button" value="." />
    <input class="but_ac but" type="button" value="=" />
//上面四行是计算器上第六行的数字区+功能区
</div>

4、这样我们在html中的大框架就基本设定完成，接下来就可以使用css来进行样式设计。

三、计算器css样式设计

1、首先我们对计算器的大小以及背景颜色进行一个设计，前面我们在html中jsj用的是`id选择器,故在css中使用#id名来定义：

        #jsj {
        border: solid 1px black;  //边框
        border-radius: 5px;   //圆角设置5px
        width: 500px;     
        height: 600px;    //宽高设置为500*600
        text-align: center;   
        margin: 0 auto;     //在网页中居中显示
        background-color: #e6e6e6;   //设置背景颜色
    }

2、其次我们自上而下先对显示区screen来进行样式设计：

        .screen {
        width: 490px;
        height: 120px;   //显示区的宽高为490*120
        font-size: 1.5em;  //字体大小
        color: black;  //字体颜色
        text-align: right;    //居中显示
        background-color: #e6e6e6;  //背景颜色
        margin-top: 30px;    
        margin-bottom: 20px;  //设置上下间距
    }

3、再来我们对功能区的按钮but_ac进行设计：

        .but_ac {
        width: 120px;   
        height: 70px;    //宽高设置为120*70px
        background-color:#f0f0f0;    //颜色为浅灰色
        font-size: 1.2em;   //字体大小
    }

4、最后再对数字区的按钮but进行样式设计：

        .but {
        width: 120px;
        height: 70px;     //宽高设置为120*70px
        background-color:#ffffff;    //按钮颜色设置为白色
        font-size: 1.2em;   //字体大小和功能区的一样
    }

看一下整体的效果：

image

三、计算器JavaScript实现

1、首先我们先定义一些变量用于获取用户所点击的按钮上的元素，将获取的元素显示在屏幕上：

var num = document.getElementsByClassName("but");
//num用于储存数字区和功能区按钮上的元素
var scr = document.getElementsByClassName("screen")[0];
//scr用于储存显示区上的文字显示

2、然后通过for循环为每个按钮添加onclick事件：

for (var i = 0; i < num.length; i++) {
num[i].onclick = function () {
…………}
}

3、接下来再函数中依次实现各个功能：
1）C/CE：清除

if (this.value == "C" || this.value == "CE") {
scr.value = "";}////如果点击AC，则清空屏幕

2）+/-：更改正负

else if (this.value == "+/-") {    //如果点击AC，则清空屏幕
if (scr.value == "") {      //如果点击“+/-”按钮有两种情况：
//第一种情况，如果此时屏幕为空，则什么也不显示
scr.value = "";
}
//如果屏幕不为空，就判断最后两个元素是不是运算符加数字的结构
else if (isNaN(scr.value.charAt(scr.value.length - 1)) == false && isNaN(scr.value.charAt(scr.value.length - 2)) == true) {
 //给最后一个数字加括号并变为负数 
scr.value = scr.value.substr(0, scr.value.length - 1) + "(" + "-" + scr.value.charAt(scr.value.length - 1) + ")";
}
}

3）Del：退格

else if (this.value == "Del" && this.value != "") {
//当屏幕不为空时，判断点击的是不是退格键
scr.value = scr.value.substr(0, scr.value.length - 1);
}

4）.:若当前无数则点击产生0.小数，若有，则算进数字中等到按“=”的时候进行计算

else if (scr.value == "" && this.value == ".") {
//当屏幕为空时判断是否点击的是小数点
scr.value = "0.";
}

5）=：等于操作，调用eval函数计算表达式的结果

else if (this.value == "=") {
//当点击等于号时，用eval函数计算表达式的结果并显示到屏幕上
scr.value = eval(scr.value);
}

6）+、-、*、/：加减乘除

else if (scr.value == "" && (this.value == "+" || this.value == "-" || this.value == "*" || this.value == "/")) {
//当屏幕为空时，点击+、-、*、/时不做反应
                    scr.value == "";
}

7）%：百分比，将数字化成百分比的形式，即乘以0.01

else if (this.value == "%") {
scr.value = scr.value * 0.01;
}

8）√：根号，开方运算

else if (this.value == "√") {
scr.value = Math.sqrt(Number(eval(scr.value)));
}

9）1/x：将输入的数字作为分母

else if (this.value == "1/x") {
scr.value = 1 / Number(eval(scr.value));
}

10）x²：平方运算

else if (this.value == "x²") {
scr.value = Math.pow(Number(eval(scr.value)), 2);
}

11）除操作运算符外改变显示区的内容，其他时候都显示数字区内点击按钮的元素

else {
scr.value += this.value;
}

最终实现效果：

image

点击“=”后：

image

各个按钮也能够基本实现作用，这里就不一一展示，详细可见具体html页面。

5.实验心得

1、上一次用JavaScript初次尝试在Node.js上编程运行不能够结合css和html有一个图形界面，这次在网页上结合了css和html做一个网页版的简单计算器，感觉对网页的编程熟悉度更进了一步，很有收获。

2、由于对JavaScript的掌握度不是很熟悉，所以在计算器的某些操作还有待提升，比如说√开方运算符，暂时还不能实现输入3+√2这样的式子，因为一点击√就会对显示区内的所有数字进行开方，后续会继续完善这些细节问题。

Javascript编程训练