JS之面向对象

用面向对象方法做一个计算器:

html代码:

<style type="text/css">
table{
margin: 0 auto;
text-align: center;
}
input{
100px;
height: 80px;
font-size: 60px;
}
#sum{
480px;
}

</style>

<body>
<table width="500" height="600" border="1" cellpadding="0" cellspacing="2">
<tr >
<td colspan="4">
<input type="text" id="sum"/>
</td>

</tr>
<tr >
<td><input type="button" value="1" id="num1" name="num"/></td>
<td><input type="button" value="2" id="num2" name="num"/></td>
<td><input type="button" value="3" id="num3" name="num"/></td>
<td><input type="button" value="+" id="fuhao1" name="fuhao"/></td>


</tr>
<tr >
<td><input type="button" value="4" id="num4" name="num"/></td>
<td><input type="button" value="5" id="num5" name="num"/></td>
<td><input type="button" value="6" id="num6" name="num"/></td>
<td><input type="button" value="-" id="fuhao2" name="fuhao"/></td>

</tr>
<tr >
<td><input type="button" value="7" id="num7" name="num"/></td>
<td><input type="button" value="8" id="num8" name="num"/></td>
<td><input type="button" value="9" id="num9" name="num"/></td>
<td><input type="button" value="*" id="fuhao3" name="fuhao"/></td>

</tr>
<tr height="100">

<td> <input type="button" value="0" id="num0" name="num"/></td>
<td> <input type="button" value="." id="num." name="num"/></td>
<td> <input type="button" value="=" id="dengyu" name="dengyu"/></td>
<td> <input type="button" value="/" id="fuhao4" name="fuhao"/></td>

</tr>
</table>
</body>

<script src="js/counter.js" type="text/javascript" charset="utf-8"></script>

script代码:

var counters = {
num1: 0,
fuhao: "",
sum: document.getElementById("sum"),
getnum: function(num) {
this.sum.value += num;
},
getfuhao: function(fuhao) {
this.num1 = this.sum.value;
this.fuhao = fuhao;
this.sum.value = "";

},
getvalue: function() {
this.sum.value=eval(this.num1+this.fuhao+this.sum.value);

}
}

//点击数字,显示数字
var objnum = document.getElementsByName('num');
for(var i = 0; i < objnum.length; i++) {
objnum.item(i).onclick = function() {
//alert(this.value);
counters.getnum(this.value);
}
}
//点击符号,显示符号
var objfuhao = document.getElementsByName('fuhao');
for(var j = 0; j < objfuhao.length; j++) {
objfuhao.item(j).onclick = function() {
counters.getfuhao(this.value);
//alert("aa");
}
}
//点击等号,显示结果
var objvalue = document.getElementById('dengyu');
objvalue.onclick=function(){
counters.getvalue();
//alert('aa');
}

无才难做千里马,有志可吞九霄云!
原文地址:https://www.cnblogs.com/lfvkit/p/6386550.html