Js实现简单计算器3 面向对象的方法优化写法

来源：互联网发布：商业宣传软件编辑：程序博客网时间：2024/05/17 01:50

还是一样的效果图，如下：

这里写图片描述

这次采用面向对象的方法，建立了一个Caculator类，下面是类似于uml2.0类图描述

:Caculator experssion:object result:object keyboad:object state:(0|1|2) 0:input 1:caculated 2:err cl( ) clear del( ) back eval( ) inputNum( ) inputOper( ) ini( ) to bind event

原先方法是通过遍历btn进行绑定事件，这样效率不高。现在仅在keyboard中绑定事件，通过event.target属性来判断触发的方法。可以看见，这样的写法代码简单很多。源代码如下：

<!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.keyboard = document.querySelector('.keyboard');    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).toString();                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 (event) {                           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;           }       }   }*/    this.ini = function () {        this.keyboard.addEventListener('click', (function (caculator) {            return function (event) {                if (event.target.tagName.toLowerCase() != 'span') return ;                var cont = event.target.innerHTML;                var operArr = ['+', '-', '*', '/', '.'];                switch (cont) {                    case 'AC':                        caculator.cl();                        break;                    case 'DEL':                        caculator.del();                        break;                    case '=':                        caculator.eval();                        break;                    default:                        if (operArr.indexOf(cont) >= 0) {                            //is operator                            caculator.inputOper(cont);                        } else {                            caculator.inputNum(cont);                        }                        break;                }            }        }) (this), true);    }};var mycaculator = new Caculator();mycaculator.ini();</script></body></html>

阅读全文

0 0

Js实现简单计算器3 面向对象的方法 优化写法

Js实现简单计算器3 面向对象的方法优化写法