计算器源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js面向对象编程之计算器</title>
<style type="text/css">
html,body {font-size:12px; font-family:Consolas;}
div {margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px;}
a {text-decoration:none; color:#666}
#caculator {width:170px; border:1px solid #CCC; text-align:center;padding:2px;}
#pannel > a:hover {background-color:#FFF;}
</style>
<script type="text/javascript">
function caculator()
{
   this.expression = '';
   this.clearFlag = true;
};
caculator.prototype = {
       createButton:function(lb)
       {
           var bt = this.create('a');
           bt.style.cssText = 'cursor:pointer;padding:2px 4px;border:1px solid #CCC; margin:2px; width:20px; float:left; background-color:#EFEFEF; text-align:center;';
           bt.innerHTML = lb;
           return bt;

       },
       init:function()
       {
           var _this = this;
           var btn = [['7','8','9','/','C'],['4','5','6','x','←'],['1','2','3','-','.'],['(','0',')','+','=']];
           var lo = this.get('pannel');
           var bt = null;
           for(var i in btn)
           {
               for(var k in btn[i])
               {
                   bt = this.createButton(btn[i][k]);
                   this.addActionListener(bt,'click',function(e){ var evt = window.event || e; _this.clickEvent(e);});
                   lo.appendChild(bt);
               }
           }
       },
       get:function(i)
       {
           return typeof(i) == 'string'?document.getElementById(i):i;
       },
       create:function(tagName)
       {
           return document.createElement(tagName);
       },
       addActionListener:function(o,evt,callback)
       {
           if(window.addEventListener)
           {
               o.addEventListener(evt,callback,false);
           }else if(window.attachEvent){
               o.attachEvent('on' + evt,callback);
           }else{
               o['on' + evt] = callback;
           }
       },
       //获取点击事件元素并计算
       clickEvent:function(e)
       {
           var o = e.srcElement || e.target;
           var v = o.innerHTML;
           var l = this.expression.length;
           var i = this.get('show');
           var m = i.value;
           m;
           var n = m.length;
           switch(v)
           {
               case '←':
                   this.expression = l > 1?this.expression.substr(0,l - 1):'0';
                   i.value = n > 1?m.substr(0,n - 1):'0';
                   if(i.value == '0') this.clearFlag = true;
                   break;
               case '=':
                   this.expression = this.expression.replace('x','*');
                   i.value = eval(this.expression);
                   this.clearFlag = true;
                   break;
               case 'C':
                   i.value = '0';
                   this.expression = '';
                   this.clearFlag = true;
                   break;
               default:
                   this.expression += v;
                   var val = parseInt(m);
                   if(v != '+' && v != '-' && v != 'x' && v != '/' && v != '(' && v != ')')
                   {
                       i.value = this.clearFlag?v:(m + '' + v);
                       this.clearFlag = false;
                       return;
                   }
                   this.clearFlag = true;
           }
       }
   }

   var initCaculator = function()
   {
       var cal = new caculator();
       cal.init();
   }
</script>
</head>

<body onload="initCaculator();">
<div id="caculator">
<div id="result"><input type="text" size="22" readonly="readonly" id="show" name="show" value="0" style="width:162px;" /></div>
<div id="pannel"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
转的别人的，留着研究下。

posted on 2012-01-12 00:09 lianQ 阅读(514) 评论(0) 收藏举报