您的位置：首页 > Web前端 > JavaScript

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

2017-08-02 10:36 225 查看
还是一样的效果图，如下：



这次采用面向对象的方法，建立了一个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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  面向对象 javascript
相关文章推荐
新的分享
章节导航