<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>計算器</title>
<style type="text/css">
input {
width:50px;
}
#Backspace {
width:120px;
}
#CE {
width:110px;
}
#result {
width:300px;
}
</style>
<script type="text/javascript">
function Calculator() {
this.prevNum = '0';
this.operator = '';
this.clear = false;
this.process = function (element) {
switch (element.value) {
case '.' :
case '0' :
case '1' :
case '2' :
case '3' :
case '4' :
case '5' :
case '6' :
case '7' :
case '8' :
case '9' :
this.setNum(element.value);
break;
case '+/-' :
this.setSymbol();
break;
case 'CE' :
case 'C' :
this.clearResult();
break;
case 'Backspace' :
this.deleleOne();
break;
case '+' :
case '-' :
case '*' :
case '/' :
this.setOperator(element.value);
break;
case '=' :
this.calculator();
break;
}
}
// 設置數字
this.setNum = function(num) {
var result = document.getElementById("result");
var pointIndex = result.value.indexOf('.');
if (pointIndex >= 0 && num == '.') {// 己經包含小數點,不再添加
return;
}
var maxLength = 32;
if (pointIndex) {// 包含小數點時,最大位數爲33
maxLength = 33;
}
// 超出最大位數限制
if (result.value.length >= maxLength) {
return;
}
/*
if (result.value == '0' && num != '.') {// 輸入的數非小數，去掉前面的0
result.value = num;
} else {
result.value = result.value + num;
}
*/
alert('operator: ' + this.operator.length + " clear: " + this.clear);
if (this.operator != "" && this.clear) {
this.prevNum = result.value;
result.value = '';
this.clear = false;
}
if (result.value == '0' && num != '.') {// 輸入的數非小數，去掉前面的0
result.value = num;
} else {
result.value = result.value + num;
}
}
// 設置符號位
this.setSymbol = function() {
var result = document.getElementById("result");
var num = new Number(result.value);
var tmp = -num.valueOf();
result.value = tmp;
}
// 清除結果,恢復爲0
this.clearResult = function() {
var result = document.getElementById("result");
result.value = 0;
this.prevNum = '';
this.operator = '';
}
// 刪除一位數
this.deleteOne = function() {
if (result.value.length > 1) {
result.value = result.value.substr(0, result.value.length - 1);
} else {
result.value = 0;
}
}
this.setOperator = function(operator) {
this.operator = operator;
alert(this.operator);
// this.prevNum = document.getElementById("result").value;
this.clear = true;
this.calculator();
}
// 計算
this.calculator = function() {
var result = document.getElementById("result");
var currentNum = result.value;
if (this.prevNum.length && currentNum.length) {
var data = 0;
switch (this.operator) {
case '+' :
var firstNum = new Number(this.prevNum).valueOf();
var secondNum = new Number(currentNum).valueOf();
data = firstNum + secondNum;
break;
case '-' :
data = this.prevNum - currentNum;
break;
case '*' :
data = this.prevNum * currentNum;
break;
case '/' :
data = this.prevNum / currentNum;
break;
}
result.value = data;
this.prevNum = data;
this.operator = '';
} else {
//result.value = this.prevNum;
}
}
}
var c = new Calculator();
</script>
</head>
<body >
<table border="0" width="300px">
<tr>
<td colspan="5"><input type="text" id="result" value="0" style="text-align:right;" /></td>
</tr>
<tr>
<td colspan="2"><input id="Backspace" type="button" value="Backspace" οnclick="c.process(this)" /></td>
<td colspan="2"><input id="CE" type="button" value="CE" οnclick="c.process(this)" /></td>
<td><input type="button" value="C" οnclick="c.process(this)" /></td>
</tr>
<tr>
<td><input type="button" value="7" οnclick="c.process(this)" /></td>
<td><input type="button" value="8" οnclick="c.process(this)" /></td>
<td><input type="button" value="9" οnclick="c.process(this)" /></td>
<td><input type="button" value="/" οnclick="c.process(this)" /></td>
<td><input type="button" value="sqrt" οnclick="c.process(this)" /></td>
</tr>
<tr>
<td><input type="button" value="4" οnclick="c.process(this)" /></td>
<td><input type="button" value="5" οnclick="c.process(this)" /></td>
<td><input type="button" value="6" οnclick="c.process(this)" /></td>
<td><input type="button" value="*" οnclick="c.process(this)" /></td>
<td><input type="button" value="%" οnclick="c.process(this)" /></td>
</tr>
<tr>
<td><input type="button" value="1" οnclick="c.process(this)" /></td>
<td><input type="button" value="2" οnclick="c.process(this)" /></td>
<td><input type="button" value="3" οnclick="c.process(this)" /></td>
<td><input type="button" value="-" οnclick="c.process(this)" /></td>
<td><input type="button" value="1/x" οnclick="c.process(this)" /></td>
</tr>
<tr>
<td><input type="button" value="0" οnclick="c.process(this)" /></td>
<td><input type="button" value="+/-" οnclick="c.process(this)" /></td>
<td><input type="button" value="." οnclick="c.process(this)" /></td>
<td><input type="button" value="+" οnclick="c.process(this)" /></td>
<td><input type="button" value="=" οnclick="c.process(this)" /></td>
</tr>
</table>
</body>
</html>
js版本計算器
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章