您的位置：首页 > Web前端 > JavaScript
js版本计算器第三版

2012-07-19 09:20 204 查看
<!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.value = '';
this.current = '';
this.operator = '';

this.process = function (code) {
switch (code.toString()) {
case '.' :
case '0' :
case '1' :
case '2' :
case '3' :
case '4' :
case '5' :
case '6' :
case '7' :
case '8' :
case '9' :
this.setNum(code);
break;
case '+/-' :
this.setSymbol();
break;
case 'CE' :
this.clearResult();
break;
case 'C' :
this.clearAll();
break;
case 'Backspace' :
this.deleteOne();
break;
case 'sqrt' :
case '+' :
case '-' :
case '*' :
case '/' :
case '=' :
this.calculator(code);
break;
}
}

// 设置数字
this.setNum = function(num) {
var result = document.getElementById("result");

var pointIndex = this.current.toString().indexOf('.');
if (pointIndex >= 0 && num == '.') {// 己经包含小数点,不再添加
return;
}

var maxLength = 32;
if (pointIndex) {// 包含小数点时,最大位数为33
maxLength = 33;
}
// 超出最大位数限制
if (this.current.toString().length >= maxLength) {
return;
}

if (this.current.toString() == '0' && num != '.') {// 输入的数非小数，去掉前面的0
this.current = num;
} else {
this.current += "" + num;
}

result.value = this.current;
}

// 设置符号位
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.current = '';
}

// 清除结果,恢复为0，不清除符号
this.clearAll = function() {
var result = document.getElementById("result");
result.value = '0';

this.value = '';
this.current = '';
this.operator = '';
}

// 删除一位数
this.deleteOne = function() {
var result = document.getElementById("result");
var tmp = result.value.length > 1 ? result.value.substr(0, result.value.length - 1) : 0;
tmp = tmp == '-' ? 0 : tmp;

result.value = tmp;
this.current = tmp;
}

// 计算
this.calculator = function(operator) {
var result = document.getElementById("result");

if (operator == 'sqrt') {
if (result.value != "") {
this.value = Math.sqrt(result.value);

result.value = this.value;

this.current = result.value;
}
} else {
if (this.value != "" && this.current != "" && this.operator != '') {
var firstNum = new Number(this.value).valueOf();
var secondNum = new Number(this.current).valueOf();

var value = 0;
switch (this.operator) {
case '+' :
value = firstNum + secondNum;
break;
case '-' :
value = firstNum - secondNum;
break;
case '*' :
value = firstNum * secondNum;
break;
case '/' :
value = firstNum / secondNum;
break;
}

this.value = value;

result.value = this.value.toString();
} else {
this.value = this.current == '' ? this.value : this.current;
}

if (operator == "=") {
result.value = this.value == '' ? '0' : this.value;
this.operator = '';
} else {
this.operator = operator;
}
this.current = '';
}
}
}

var c = new Calculator();

document.onkeyup = function(e)
{
var evt = (typeof e == "undefined") ? window.event : e;
if ((evt.keyCode >= 48 && evt.keyCode <= 57 && !evt.shiftKey) ||
(evt.keyCode >= 96 && evt.keyCode <= 105 && !evt.shiftKey))
{
if (evt.keyCode > 57)
{
c.process(evt.keyCode - 96);
}
else
{
c.process(evt.keyCode - 48);
}
}
else if ((evt.keyCode == 107 && !evt.shiftKey) || (evt.keyCode == 61 && evt.shiftKey) || (evt.keyCode == 187 && evt.shiftKey))
{
c.process('+');
}
else if ((evt.keyCode == 109 && !evt.shiftKey) || (evt.keyCode == 189 && !evt.shiftKey))
{
c.process('-');
}
else if ((evt.keyCode == 106 && !evt.shiftKey) || (evt.keyCode == 56 && evt.shiftKey))
{
c.process('*');
}
else if ((evt.keyCode == 111 && !evt.shiftKey) || (evt.keyCode == 191 && !evt.shiftKey))
{
c.process('/');
}
else if (evt.keyCode == 13 || (evt.keyCode == 61 && !evt.shiftKey) || (evt.keyCode == 187 && !evt.shiftKey))
{
c.process('=');
}
else if ((evt.keyCode == 110 && !evt.shiftKey) || (evt.keyCode == 190 && !evt.shiftKey))
{
c.process('.');
}
else if (evt.keyCode == 27)
{
c.process('C');
}
else if (evt.keyCode == 8)
{
c.process('Backspace');
}

return false;

//alert(evt.keyCode);
}
</script>
</head>

<body >
<table border="0" width="300px">
<tr>
<td colspan="5"><input type="text" id="result" value="0" style="text-align:right;" readonly="readonly" /></td>
</tr>
<tr>
<td colspan="2"><input id="Backspace" type="button" value="Backspace" onclick="c.process(this.value)" /></td>
<td colspan="2"><input id="CE" type="button" value="CE" onclick="c.process(this.value)" /></td>
<td><input type="button" value="C" onclick="c.process(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="c.process(this.value)" /></td>
<td><input type="button" value="8" onclick="c.process(this.value)" /></td>
<td><input type="button" value="9" onclick="c.process(this.value)" /></td>
<td><input type="button" value="/" onclick="c.process(this.value)" /></td>
<td><input type="button" value="sqrt" onclick="c.process(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="c.process(this.value)" /></td>
<td><input type="button" value="5" onclick="c.process(this.value)" /></td>
<td><input type="button" value="6" onclick="c.process(this.value)" /></td>
<td><input type="button" value="*" onclick="c.process(this.value)" /></td>
<td><input type="button" value="%" onclick="c.process(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="c.process(this.value)" /></td>
<td><input type="button" value="2" onclick="c.process(this.value)" /></td>
<td><input type="button" value="3" onclick="c.process(this.value)" /></td>
<td><input type="button" value="-" onclick="c.process(this.value)" /></td>
<td><input type="button" value="1/x" onclick="c.process(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="c.process(this.value)" /></td>
<td><input type="button" value="+/-" onclick="c.process(this.value)" /></td>
<td><input type="button" value="." onclick="c.process(this.value)" /></td>
<td><input type="button" value="+" onclick="c.process(this.value)" /></td>
<td><input type="button" value="=" onclick="c.process(this.value)" /></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航