<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
<style type="text/css">
.btn {
width: 70px;
height: 30px;
margin: 1px;
border: 1px solid #2F3642;
border-radius: 2px;
color: #FFFFFF;
outline: 0;
}
.num {
background-color: #3262A6;
}
.equal {
background-color: #D87B00;
}
.math {
background-color: #80573E;
}
.control {
background-color: #47515F;
}
.text {
width: 297px;
height: 30px;
margin-bottom: 5px;
font-size: 26px;
font-family: Tahoma, Geneva, sans-serif;
color: #fff;
background-color: #000;
text-align: right;
outline: 0;
}
</style>
</head>
<body>
<input class="text" name="textfield" readonly type="text" id="txt" size="30" />
<br />
<button class="btn control" type="button" id="setMemory" name="control">存储</button>
<button class="btn control" type="button" id="getMemory" name="control">取存</button>
<button class="btn control" type="button" id="backspace" name="control">退格</button>
<button class="btn control" type="button" id="clear" name="control">清屏</button>
<br />
<input class="btn num" type="button" name="button" id="" value="7" />
<input class="btn num" type="button" name="button" id="" value="8" />
<input class="btn num" type="button" name="button" id="" value="9" />
<button class="btn math" type="button" name="math" value="/">÷</button>
<br />
<input class="btn num" type="button" name="button" id="" value="4" />
<input class="btn num" type="button" name="button" id="" value="5" />
<input class="btn num" type="button" name="button" id="" value="6" />
<button class="btn math" type="button" name="math" value="*">×</button>
<br />
<input class="btn num" type="button" name="button" id="" value="1" />
<input class="btn num" type="button" name="button" id="" value="2" />
<input class="btn num" type="button" name="button" id="" value="3" />
<button class="btn math" type="button" name="math" value="+">＋</button>
<br />
<input class="btn num" type="button" name="button" id="" value="0" />
<input class="btn num" type="button" name="button" id="" value="." />
<button class="btn equal" type="button" id="equal" name="math" value="=">＝</button>
<button class="btn math" type="button" name="math" value="-">－</button>
<script language="javascript" type="text/javascript">
window.onload = function() {
//显示框
var oTxt = document.getElementById("txt");
//数字键
var oBtn = document.querySelectorAll(".num");
//运算键
var oMath = document.querySelectorAll(".math");
//等号键
var oEqual = document.getElementById("equal");
//退格键
var oBackspace = document.getElementById("backspace");
//清屏键
var oClear = document.getElementById("clear");
//存储键
var oSet = document.getElementById("setMemory");
//取存键
var oGet = document.getElementById("getMemory");
//运算过程中储存对象
var obj = {
num1: 0,
sign: '',
num2: 0,
result: 0,
isDone: false
}
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].onclick = function() {
// 根据obj.isDone判断是否进行下一步运算
if (obj.isDone) {
oTxt.value = '';
obj.isDone = false;
}
//如果开始小数点，则自动填充0
if (this.value == "." && oTxt.value == "") {
oTxt.value = "0.";
return false;
}
//如果已经有小数点，则不再添加小数点
if (this.value == "." && oTxt.value.indexOf(".") != -1) {
return false;
}
//如果第一个数字为0
if (oTxt.value == "0" && this.value != ".") {
oTxt.value = this.value;
return false;
}
// 默认
oTxt.value += this.value;
}
}
//退格
oBackspace.onclick = function() {
oTxt.value = oTxt.value.substr(0, oTxt.value.length - 1);
}
//清屏
oClear.onclick = function() {
oTxt.value = "";
// 重置
resetObj();
obj.isDone = false;
}
//运算过程，暂时只能运算一个运算符
for (var i = 0; i < oMath.length; i++) {
oMath[i].onclick = function() {
obj.isDone = false;
obj.num1 = oTxt.value;
obj.sign = this.innerText;
oTxt.value += this.innerText;
}
}
//等号计算
oEqual.onclick = function() {
//计算运算符的位置，切割出第二个数字
var index = oTxt.value.indexOf(obj.sign);
// 如果没有运算符，return,不作处理
if (!index) {
return false;
}
obj.num2 = oTxt.value.slice(index + 1);
// 如果运算符之后第二个数字没有，不做运算
if (!obj.num2) {
obj.num2 = 0;
return false;
}
switch (obj.sign) {
case "÷":
obj.result = obj.num1 / obj.num2;
break;
case "×":
obj.result = obj.num1 * obj.num2;
break;
case "＋":
obj.result = parseFloat(obj.num1) + parseFloat(obj.num2);
break;
case "－":
obj.result = obj.num1 - obj.num2;
break;
default:
break;
}
oTxt.value = obj.result;
obj.isDone = true;
// 重置
resetObj();
}
// 储存数字至localStorage,只存第一个数字或者计算之后的结果
oSet.onclick = function() {
if (!obj.sign) {
localStorage.memory = oTxt.value;
}
}
/*
取出localStorage里面的数字，
如果是第一个数字/计算结果直接替换，
如果是第二个数字+=至运算符后面
*/
oGet.onclick = function() {
if (obj.sign) {
// 如果是第二个数字，替换掉原先的数字，+=至运算符后面
var index = oTxt.value.indexOf(obj.sign);
oTxt.value = oTxt.value.substr(0, index + 1);
oTxt.value += localStorage.memory;
} else {
oTxt.value = localStorage.memory;
}
}
/*
重置运算过程中储存对象
*/
function resetObj() {
obj.num1 = obj.num2 = obj.result = 0;
obj.sign = '';
}
}
</script>
</body>
</html>
