计算器案例

<!DOCTYPE html>
<html>
  <head>
    <title>计算器</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .panel {
        border: 4px solid #ddd;
        width: 192px;
        margin: 100px auto;
        border-radius: 6px;
      }
      .panel p, .panel input {
        font-family: "微软雅黑";
        font-size: 20px;
        margin: 4px;
        float: left;
        border-radius: 4px;
      }
      .panel p {
        width: 122px;
        height: 26px;
        border: 1px solid #ddd;
        padding: 6px;
        overflow: hidden;
      }
      .panel input {
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
      }
    </style>
    <script type="text/javascript">
        function cal(e){
            //1.获取时间源（button,p,div)
            var obj=e.srcElement||e.target;
            //2.只处理按钮button事件,节点名大写
            if(obj.nodeName!="INPUT"){
                return;
            }
            //3.判断按钮的类型（value)做不同的处理
            var p=document.getElementById("screen");
            var val=obj.value;
            if(val=="C"){
                //清屏
                p.innerHTML="";
            }else if(val=="="){
                //计算
                try{
                    var r=eval(p.innerHTML);
                    p.innerHTML=r;
                }catch(e){
                    //错误时提示
                    p.innerHTML="Error";
                }
            }else{
                //累加
                p.innerHTML+=val;
            }
            
        }
    </script>
  </head>
  <body>
    <div class="panel" onclick="cal(event);">
      <div>
        <p id="screen"></p>
        <input type="button" value="C">
        <div style="clear:both"></div>
      </div>
      <div>
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="/">
        
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="*">
        
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="-">
        
        <input type="button" value="0">
        <input type="button" value=".">
        <input type="button" value="=">
        <input type="button" value="+">
        
        <div style="clear:both"></div>
      </div>
    </div>    
  </body>
</html>
图片示例
屏幕快照 2016-12-10 下午6.19.29.png
计算器案例

推荐阅读更多精彩内容
