Js实现简单计算器2 面向对象的方法

来源：互联网发布：web数据库测试编辑：程序博客网时间：2024/06/06 04:41
还是一样的效果图，如下：
这里写图片描述
这次采用面向对象的方法，建立了一个Caculator类，下面是类似于uml2.0类图描述
:Caculator experssion:object result:object btns:object state:(0|1|2) 0:input 1:caculated 2:err cl( ) clear del( ) back eval( ) inputNum( ) inputOper( ) ini( ) to bind event
源代码如下：
<!DOCTYPE html><html><head><title>Caculator</title><style type="text/css">    .content {        display: block;        position: relative;        top: 150px;        width: 400px;        left: 30%;        font-family: Consolas;        font-weight: lighter;        font-size: 16px;    }    .monitor {        width: 400px;        border: solid 1px black;        text-align: right;        background-color: #f7f7f7;    }    .monitor input {        border: none;        font-size: 30px;        text-align: right;        width: 380px;        padding: 5px;        background-color: #f7f7f7;    }    .monitor #expression {        font-size: 32px;        height: 50px;    }    .monitor #result {        color: red;    }    .keyboard {        width: 400px;        display: block;        padding-top: 10px;        padding-left: 5px;    }    .keyboard span {        border: solid 1px #cccccc;        margin: 0px;        display: inline-block;        width: 20%;        height: 40px;        text-align: center;        padding: 15px 5px 5px 5px;        cursor: pointer;    }    .keyboard span:hover {        background-color: cornsilk;    }</style></head><body><div class="content">    <div class="monitor">        <input id="expression" type="text" maxlength="200" multiple="1" value="0">        <input id="result" type="text" maxlength="100" value="0">    </div>    <div class="keyboard">        <span>AC</span>        <span>DEL</span>        <span>/</span>        <span>*</span>        <span>7</span>        <span>8</span>        <span>9</span>        <span>-</span>        <span>4</span>        <span>5</span>        <span>6</span>        <span>+</span>        <span>1</span>        <span>2</span>        <span>3</span>        <span style="float:right;height:102px;position: relative;right:5px;line-height: 5em;">=</span>        <span>%</span>        <span>0</span>        <span>.</span>    </div></div><script type="text/javascript">function Caculator() {    this.expression = document.getElementById('expression');    this.result = document.getElementById('result');    this.btns = document.getElementsByTagName('span');    this.state = 0;//0 input 1 caculated 2 error    this.cl = function () {      this.expression.value = '0' ;      this.result.value = '0';      this.state = 0;    };    this.inputOper = function (val) {        if (0 == this.state) {            this.expression.value += val;        } else if (1 == this.state) {            this.expression.value = this.result.value;            this.expression.value += val;            this.state = 0;        } else {            this.cl();            this.inputOper(val);        }    };    this.inputNum = function (val) {        if (0 == this.state) {            if ('0' == this.expression.value) {                this.expression.value = val;            } else {                this.expression.value += val;            }        } else if (1 == this.state) {            this.cl();            this.inputNum(val);        } else {            this.cl();            this.inputNum(val);        }    };    this.eval = function () {        if (0 == this.state) {            try {                this.result.value = eval(this.expression.value);                this.state = 1;            } catch (err) {                this.result.value = 'ERR';                this.state = 2;            }        } else if (1 == this.state) {            this.cl();        } else {            this.cl();        }    };    this.del = function () {        if (0 == this.state) {            if (this.expression.value.length <= 1) {                this.expression.value = '0';            } else {                this.expression.value = this.expression.value.slice(0, -1);            }        } else if (1 == this.state) {            this.state = 0;            this.del();        } else {            this.cl();        }    }   this.ini = function () {       for (var i = 0; i < this.btns.length; i++) {           var btn = this.btns[i];           var content = btn.innerHTML.trim();           switch (content) {               case 'AC':                   btn.onclick = (function (caculator) {                       return function () {                           caculator.cl();                       }                   })(this);                   break;               case '=':                   btn.onclick = (function (caculator) {                       return function () {                           caculator.eval();                       }                   })(this);                   break;               case 'DEL':                   btn.onclick = (function (caculator) {                       return function () {                           caculator.del();                       }                   })(this);                   break;               default:                   if (isNaN(Number(content))) {                       //is operator                       btn.onclick = (function (caculator, content) {                           var cont = content;                           return function () {                               caculator.inputOper(cont);                           };                       })(this, content);                   } else {                       //is number                       btn.onclick = (function (caculator, content) {                           var cont = content;                           return function () {                               caculator.inputNum(cont);                           };                       })(this, content);                   }                   break;           }       }   };};var mycaculator = new Caculator();mycaculator.ini();</script></body></html>
阅读全文
0 0