简单的计算器生成

接下来我将说明一个简单的计算器生成，包括+ - * /四种基本运算，可以实现两位数据的这四种基本运算，那么跟着我的思路开始吧！

一.计算器结构

首先呢，说明一下我们这个简易计算器的结构
1.一个输入框--------用户输入第一个数据
2.一个下拉列表----------用户来选择所需要的运算方式
3.又一个输入框---------用户可以输入第二个数据
4.一个按钮---------通过点击按钮实现计算
5.一个输出框-------用来输出我们的计算结果

好了那么知道了我们的结构，快开始打代码吧！

<input type="text" id="txt-op1">
    <select name="" id="slt">
        <option >+</option>
        <option value="-"></option>
        <option >*</option>
        <option >/</option>
    </select>
    <input type="text" id="txt-op2">
    <button id="btn">=</button>
    <input type="text" id="txt-result">

写完代码以后我们来运行一下，看一下我们的效果
我在这里加入了一些css样式
这些效果我们可以自己来定义

二.计算器的实现

做好页面布局，接下来我们就要在JS中加入算法，使得这个计算器可以运算起来！

（一）首先我们需要先定义一些所需要的变量，并且根据ID查找页面元素，这里用到了document.getElementById()来查找页面元素
代码如下：

//根据ID查找页面元素
        var btn = document.getElementById('btn');
        var txt1 = document.getElementById('txt-op1');
        var txt2 = document.getElementById('txt-op2');
        var txtValue = document.getElementById('txt-result');
        var slt = document.getElementById('slt');
        var endValue;//运算结果

这样我们就将html中的元素根据ID提取了出来，并在Javascript中重新定义变量，并重新命名。
（二）添加点击事件onclick()
接下来我们需要将button加入点击事件，实现点击这个button，可以将运行结果在运算结果的输出框显示。
我们先对btn添加点击事件，格式如下

 //添加点击事件
        btn.onclick = function () {    
            }

接下来呢我们在点击事件中定义我们的操作数，来实现数据的运算
代码如下

 btn.onclick = function () {
            switch (slt.value) {
                case "+":
                    endValue = parseFloat(txt1.value) + parseFloat(txt2.value);//由于+运算有拼接作用，所以我们需要转换成number类型，在进行+运算，否则容易变成字符串的拼接
                    break;
                case "-":
                    endValue = txt1.value - txt2.value;
                    break;
                case '*':
                    endValue = txt1.value * txt2.value;
                    break;
                case '/':
                    endValue = txt1.value / txt2.value;
                    break;
                default:
                    endValue = txt1.value + txt2.value;//我们默认进行+运算
                    break;
            }

最后呢，我们需要将我们运算的结果显示在界面中去

//将数据展示到页面中
            txtValue.value = endValue;

这样我们就完成了一个简易的计算器!!!

（三）运行结果测试

我们来对我们的代码运行，进行数据的测试
测试数据为：
23+23=64；

26-14=12；

20*4=80；

27/3=9；

好的，经过测试我们的计算器是没有问题的，可以思考一下多按钮类型的计算器如何实现呢？