javascript制作简易计算器

记录一下Javascript编写的简易计算器。
执行界面如下：

<div>
            <ul>
                <li>
                    <input type="text"  id="input"/>
                </li>
                <li>
                    <input type="button" value="C"    class="bt" id="c" onclick="bt_c()"/>
                </li>
                <li>
                    <input type="button" value="7"  class="bt" id="seven" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="8"  class="bt" id="eight" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="9"  class="bt" id="nine" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="/"  class="bt" id="cal" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="4"  class="bt" id="four" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="5"  class="bt" id="five" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="6"  class="bt" id="six" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="*"  class="bt" id="cal" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="1"  class="bt" id="one" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="2"  class="bt" id="two" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="3"  class="bt" id="three" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="-"  class="bt" id="cal" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="0"  class="bt" id="zero" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="."  class="bt" id="dian" onclick="bt(this)"/>
                </li>
                <li>
                    <input type="button" value="="  class="bt" id="equal" onclick="equal()"/>
                </li>
                <li>
                    <input type="button" value="+"  class="bt" id="cal" onclick="bt(this)"/>
                </li>
                <span id="span"></span>
            </ul>
        </div>

利用列表将文本框与按钮布局到界面中，再通过左浮动调整位置。
在文本输入框下方还设置了span标签，当算式格式不正确时用来提醒用户。
界面的CSS布局代码如下：

<style type="text/css">
            div{
                border: 1px solid #000;
                width: 325px;
                height: 435px;
                margin: 50px auto;
                background-color: #ccc;
            }
            ul{
                /*border: 1px solid #0000ff;*/
                margin: 0 auto;
                padding: 10px;
                position: relative;
            }
            li{
                /*border: 1px solid #00ff00;*/
                list-style-type: none;  
                float: left;
                padding: 10px;
                margin: 5px auto;
            }
            .bt{
                width: 55px;
                height: 55px;   
            }
            #input{
                width: 200px;
                height: 48px;
            }
            span{
                position: absolute;
                left: 25px;
                top: 80px;
                font-family: "微软雅黑";
            }
            #equal{
                background-color: #ffcd41;
            }
        </style>

功能方面，通过点击不同的按钮，触发不同的事件，总共编写了三个事件：bt(obj),equal(),bt_c()。

<script type="text/javascript">

            //点击运算符号和数字按钮时调用
            function bt(obj){
                //获取文本输入框的元素
                var input=document.getElementById("input");
                //获取提示框的元素
                var span=document.getElementById("span");
                //定义按钮值变量
                var bt_val;
                //清空提示框的内容
                span.innerHTML="";
                //获取点击的按钮元素
                var bt=document.getElementById(obj.id);
                //当运算按钮或小数点时，获取元素值，否则将获取的元素值转换为float（避免除法时出错）
                if(bt.id=="jia"||bt.id=="jian"||bt.id=="chen"||bt.id=="chu"||bt.id=="dian"){
                    bt_val=bt.value;
                    console.log(bt_val);
                }else{
                    bt_val=parseFloat(bt.value);
                }   
                //将文本输入框原本的值与按钮代表的值拼接重新显示到文本输入框中
                input.value=input.value+bt_val;         
            }

        //点击等于按钮时调用
            function equal(){
                //获取文本输入框的元素
                var input=document.getElementById("input");
                //获取提示框的元素
                var span=document.getElementById("span");
                try{
                    //计算文本输入框的算式将答案显示到文本框中
                    var val=input.value;
                    input.value=eval(val);
                }catch(e){
                    span.innerHTML="请输入正确的算式！";
                }


        //点击清除按钮时调用
            function bt_c(){
                //获取文本输入框的元素
                var input=document.getElementById("input");
                //获取提示框框的元素
                var span=document.getElementById("span");
                span.innerHTML="";
                var val=input.value;
                //文本框中的值截取至倒数第二位，再重新显示到文本框中
                input.value=val.substring(0,val.length-1);
            }
        </script>

附上源码地址：

Demo源码