各位小伙伴，大家好，欢迎收看 web二 系列课程。这节课是一节实验课，我们将运用已经学习到的知识来实现一个简单的网页计算器，虽然我们这是第二次实验课，但是前面的第一次实验课我们只是了解了些JS代码过程中用到的调试工具，而没有真正的用JS代码写一个完整的程序去实现一些期望的功能，我们这节课就是带着大家一起来写一个真正可以实现功能的网页计算器。希望大家能够对JS在网页中的作用有更进一步的认识。由于大家现在学习的知识还不是很全面，在这次课中我们可能会用到一些大家没有学习的知识，当然，用到的都是很简单的，我一解释大家就可以理解的语句。而且在后面的课程中大家都会学习到。
好，下面我们先来看一下要实现的效果，有了一个明确的目标，才有的放矢。而且目标越明确，我们实现目标的效率也会越高。我们网页上呈现的是一个计算器的样子，点一下，哎，他还可以进行简单的运算。可以输入表达式，输出结果。这是加法运算，同样呢，也可以进行减法运算，还有乘除都可以。
让我们以专业的眼光先大概的看一下这个页面，都能看到哪些元素？很显然我们看到了很多个按钮，计算器的每个按键就是一个按钮元素，还有什么？还有一个表格,一个五行四列的表格，我们用表格把这些按键整齐的排列起来。还有一个显示框，而且它所在的表格还是合并的。现在大家脑海中是不是已经对这个页面的结构清楚了？有了大概的样子了？下面我们就来实现一下。
首先，创建一个 HTML 文件，我给它命名为：pra2.html。好，我们创建好呢，我们的编辑器会自动生成基本的 HTML 框架，有文档声明标签，有html标签，还有head和body标签。还有一个title标签，title标签是用来定义网页的标题的。我们先来写一下title，就叫网页计算器。
接下来，就添加每一个元素，有一个五行四列的表格，每个单元格有一个按钮。这是基本的结构，我们来做一下。先添加一个表格，在body标签之间，用table给出一个表格，再用tr给出一行，用td给出一列，这样一行一列就做好了，然后在这个单元格中放一个按钮元素。这样我们的一个基本单位就有了，然后我们再复制四列，再复制五行，是不是一下格局就出来了？在这种要添加很多相同的元素时，先尽量使一个基本元素表达完整，然后再复制粘贴就会效率高很多。接下来，我们把每个按钮的值都写成正确的。把第一行的前三个单元格合并成显示结果区域。也就是把中间的两个单元格去掉，然后给第一个单元格设置属性：colspan=’3’；
<td colspan = '3' id = 'result'>0</td>
我们不断完善，就会一步一步接近成功的。看一下效果，大家看基本的结构已经有了，只是我们现在的按钮好像大小不一啊，它们的大小都是由里面元素的大小所决定的，而不是统一的，规整的。
接下来，就该使用我们的第二个武器了——CSS。我们用 CSS 给页面设置样式，让我们的页面看起来更美观也更合乎我们的目标。这里，实验说明里已经给出了详细的属性设置，一起看一下吧。
分别是给按钮设置大小，也就是宽高都是50px；
button:{width:50px;height:50px;}
给每个单元格设置内边距，10px；
td{padding:10px;}
给表格和单元格设置边框，值是这些，边框的宽度是1px，实线，灰色；
table,td{border:1px solid #c0c0c0;}
给显示结果区域设置属性：字体居右，粗体，字号是26px，黑体。
#result{text-align:right;font:bolder 26px '黑体'；}
那下面就去代码中实现它们吧。
好，现在这个页面看上去已经和目标一样了，但还是个纸老虎，没有响应的功能，我们只是实现了样子一样。下面来研究一下网页计算器的功能。或者说，研究一下我们这个网页计算器的事件。
打开网页计算器。点击，运算。
我们发现每个按钮都有一个单击事件，所以要先给每个按钮添加一个单击事件。然后每个按钮被点击后执行的操作也不是都一样的。当我们点击这些数字和运算符时，计算器会把我们点击的字符连接成表达式显示在结果区域，而当我们点击等号时，则会计算表达式的结果，然后把结果显示到结果区域，当我们点击C，清除按钮时，结果区域会被清空，显示初始值0。一共就分为这三种情况。现在是不是清楚了我们要做什么？我们就是要把这三种功能实现，通过给按钮添加单击事件和事件处理函数的方式，来实现这所有的功能。看一下实验说明，这里已经把思路整理清楚了。
首先，给每个按钮添加一个单击事件。要想给每个按钮添加单击事件，首先就要找到这些按钮，我们用这样的方式来找到，大家看。
window.onload = function(){
var btns = document.getElementsByTagName('button');
for (var i =0;i<btns.length;i++){
btns[i].onclick = function(){
var val = this.value;
switch(val){
}
}
}
window.onload的意思就是说当我们浏览器的窗口加载完成后，后面的这个函数就执行。看后面的这个函数，我们用document.getElementByTagName(‘button’);这条语句来获取到所有的button元素，然后把它们存放到变量btns中。btns是以数组的方式存储，所以当我们想要获取它其中的某一个按钮元素时，和获取数组中元素的方式是一样的。我们用一个for循环来遍历其中的按钮元素。给某个元素添加单击事件后面跟一个事件处理函数。
下面我们就该写单击事件函数的内容了。我们刚刚也分析过了，单击事件有三种结果，所以就要做一个判断。如果是等号，执行什么操作，如果是C，执行什么操作，如果是普通按钮执行什么操作。
我们在这里用一个switch判断。（给出三个两个case和一个default）然后按照运算的顺序来写，也就是先写default的内容，再写等于的内容，再写清除的内容。
switch (val){
case "=":
calculate();
break;
case "C":
document.getElementById('result').innerHTML = '0';
break;
default:
var result = document.getElementById('result');
if (result.innerHTML == 0){
result.innerHTML = "";
}
result.innerHTML += val;
break;
}
function calculate(){
var equ = document.getElementById('result').innerHTML;
var result = eval(equ);
document.getElementById('result').innerHTML = result;
}