在学js的过程中用eval方法写了一个简单的计算器，本来想模仿Google的计算器，可是发现不太会，就只把简易版实现出来了。
贴一下gayhub地址：召唤师技能——传送
还是有很多问题的，不过主要是练手为主，我不会闲的蛋疼去用这个计算器的~~~
废话不多说，我直接贴代码了。
CSS:
.calculator{
height: 440px;
width: 326px;
margin: 150px auto;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px black;
overflow: hidden;
}
.calculator .c_screen {
display:block;
padding-top:1px;
width: 326px;
height: 60px;
background-color: #ddd;
border-radius: 5px;
text-align: center;
margin-top:10px;
}
.calculator .c_row{
margin: 0 23px;
}
button {
display: table-cell;
cursor: pointer;
width: 60px;
height: 45px;
margin: 20px 2px 0;
border: 0px;
border-radius: 5px;
color: #000;
outline: none;
}
button:active {
box-shadow: 0 0 2px 2px #2c93ce;
}
.c_func_btn{
background: #aaa;
font-weight: bold;
}
.c_d{
color: #fff;
font-weight: bold;
background-color:#4d90fe;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线计算器</title>
<link rel="stylesheet" type="text/css" href="calculator.css">
<script src="calculators.js"></script>
</head>
<body>
<div class="calculator">
<div class="c_screen">
<p></p>
</div>
<div class="c_btn_wrapper">
<div class="c_row">
<button class="c_func_btn">(</button>
<button class="c_func_btn">)</button>
<button class="c_func_btn">%</button>
<button class="c_func_btn">AC</button>
</div>
<div class="c_row">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="c_func_btn">/</button>
</div>
<div class="c_row">
<button>4</button>
<button>5</button>
<button>6</button>
<button class="c_func_btn">x</button>
</div>
<div class="c_row">
<button>1</button>
<button>2</button>
<button>3</button>
<button class="c_func_btn">-</button>
</div>
<div class="c_row">
<button>0</button>
<button>.</button>
<button class="c_func_btn c_d">=</button>
<button class="c_func_btn">+</button>
</div>
</div>
</div>
</body>
</html>
JS
window.onload = function() {
var btn_wrap = document.getElementsByClassName('c_btn_wrapper')[0],
// 按钮容器
content = document.getElementsByTagName('p')[0],
// 显示器内容
count = 0,
//记录显示屏上字符及数字个数
bOneDec = false; //表示显示屏一个数字中是否已经有一个小数点的状态
btn_wrap.onclick = function(e) {
var target = e.target;
if (target.nodeName.toLowerCase() === 'button') {
var btnType = target.innerText;
if (content.innerText == 'Math Error' && btnType != 'AC') {
return;
}
if (btnType == 'AC') {
bOneDec = false;
content.innerText = '0';
count = 1;
} else if (btnType == '=') {
var text = content.innerText;
if (!text) {
return;
} else {
text = text.replace(/x/g, '*');
var result;
try {
result = eval(text) + '';
if (result.search(/\./) > 0) {
bOneDec = true;
if (result.split('.')[1].length > 5) {
result = ( + result).toFixed(5);
}
}
content.innerText = result;
count = result.length;
} catch(e) {
content.innerText = e.message;
window.location.href = "https://stackoverflow.com/search?q=js+" + e.message; //面向stackoverflow编程
}
}
} else {
if (isNaN( + btnType) && btnType != '.') {
bOneDec = false;
}
if (btnType == '.') {
if (bOneDec) {
return;
}
bOneDec = true;
}
if (content.innerText == '0' && (!isNaN( + btnType) || btnType == '(' || btnType == ')')) {
content.innerText = '';
}
content.innerText += btnType;
if (count++>=25) {
alert('输入太多了！');
}
}
}
}
};
