文于止墨

计算器

—

由

于前端, 文章, 编程

计算器


    <!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>
         window.onload = function (){
         //获取事件目标节点(整个div)
         var div = document.getElementById("jsq");
         //给事件目标节点后绑定事件
         div.onclick = function (e){
         //获取事件源
         var obj = e.srcElement||e.target;
         //获取显示屏
         var p = document.getElementById("screen");
         //若用户点击的区域是input便执行以下方法
         if(obj.nodeName=="INPUT"){
         if(obj.value=="C"){
         p.innerHTML = "";
         }else if(obj.value=="="){
         try {
         p.innerHTML = eval(p.innerHTML);
     } catch (ex) {
     //若是用户输入非法,执行"="后提示"Error"
     p.innerHTML ="Error";
     }
         }else{
         p.innerHTML += obj.value;
         }
         }
         }
         }
        </script>
      </head>
      <body>
        <div class="panel" id="jsq">
          <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>

评论

发表回复取消回复