<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
margin: 20px auto;
border: 5px outset orange;
}
#tab_1,#tab_2,#tab_3{
border: 3px outset rgba(15,10,10,0.3);
}
td{
height: 30px;
background:#ccc;
}
input{
outline: none;
box-shadow: 2px 2px 8px rgba(100,100,100,0.8) inset;
}
[type=button]{
width:60px;
height:40px;
border-radius: 5px;
background: #fff;
box-shadow: 2px 2px 8px rgba(100,100,100,0.8) inset;
}
#txtnum{
background: #fff;
width:100%;
height:44px;
text-align: right;
font-size:22px;
}
.btnbox{
padding: 5px auto;
text-align: center;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td colspan="2"><input type="text" id="txtnum" value="0"></td>
<td class="btnbox">
<input type="button" value="清除" onclick="txtnum.value='0';result=0">
<input type="button" value="退格" onclick="backspace()">
</td>
</tr>
<tr>
<td>
<table id="tab_1">
<tr>
<td><input type="button" value="sin" onclick="math('sin')"></td>
<td><input type="button" value="cos" onclick="math('cos')"></td>
<td><input type="button" value="tan" onclick="math('tan')"></td>
</tr>
<tr>
<td><input type="button" value="asin" onclick="math('asin')"></td>
<td><input type="button" value="acos" onclick="math('acos')"></td>
<td><input type="button" value="atan" onclick="math('atan')"></td>
</tr>
<tr>
<td><input type="button" value="PI" onclick="math('PI')"></td>
<td><input type="button" value="1/x" onclick="math('1/x')"></td>
<td><input type="button" value="exp" onclick="math('exp')"></td>
</tr>
<tr>
<td><input type="button" value="lnx" onclick="math('lnx')"></td>
<td><input type="button" value="lgx" onclick="math('lgx')"></td>
<td><input type="button" value="n!" onclick="math('n!')"></td>
</tr>
</table>
</td>
<td>
<table id="tab_2">
<tr>
<td><input type="button" value="7" onclick="num(7)"></td>
<td><input type="button" value="8" onclick="num(8)"></td>
<td><input type="button" value="9" onclick="num(9)"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="num(4)"></td>
<td><input type="button" value="5" onclick="num(5)"></td>
<td><input type="button" value="6" onclick="num(6)"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="num(1)"></td>
<td><input type="button" value="2" onclick="num(2)"></td>
<td><input type="button" value="3" onclick="num(3)"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="num(0)"></td>
<td><input type="button" value="." onclick="decimal()"></td>
<td><input type="button" value="=" onclick="compute('=')"></td>
</tr>
</table>
</td>
<td>
<table id="tab_3">
<tr>
<td><input type="button" value="+" onclick="compute('+')"></td>
<td><input type="button" value="取整" onclick="math('int')"></td>
</tr>
<tr>
<td><input type="button" value="-" onclick="compute('-')"></td>
<td><input type="button" value="取余" onclick="compute('%')"></td>
</tr>
<tr>
<td><input type="button" value="*" onclick="compute('*')"></td>
<td><input type="button" value="x^y" onclick="compute('x^y')"></td>
</tr>
<tr>
<td><input type="button" value="/" onclick="compute('/')"></td>
<td><input type="button" value="+/-" onclick="plusMinus()"></td>
</tr>
</table>
</td>
</tr>
</table>
<script>
var Boo = false;
var result = 0 ;
var ope; //存储计算符号的变量
/*自定义通过Id来获取元素的函数 */
function $(id) {
return document.getElementById(id);
};
/*输入小数点*/
function decimal() {
var txt = $("txtnum");
//判断是否按下运算符号,若按下运算符，文本框清0；
if(Boo){
txt.value = "0." ;
}else{
//indexOf:检索数值中是否已有小数点
if(txt.value.indexOf(".")==-1){
txt.value += "." ;
}
}
};
/*显示屏获取按键数字 */
function num(num) {
var txt = $("txtnum");
//判断是否按下运算符号,若按下运算符，文本框清0；
if(Boo){
txt.value = num ;
Boo=false;
}else{
//判断初始数字是否为0
if(txt.value=="0"){
txt.value = num ;
}else{
txt.value += num ;
}
}
Boo=false;
}
function compute(op) {
var onum = $("txtnum").value;
if(onum==" "){onum=0};
Boo = true;
switch(ope){
case "+" :
result += parseFloat(onum);break;
case "-" :
result -= parseFloat(onum);break;
case "*" :
result *= parseFloat(onum);break;
case "/" :
result /= parseFloat(onum);break;
case "=" :
result = parseFloat(onum);break;
case "%" :
result %= onum;break;
case "x^y" :
result =Math.pow(result,onum);break;
default:
result = parseFloat(onum);
}
$("txtnum").value = result;
ope = op;
}
//正负键：取反
function plusMinus(){
var onum = $("txtnum").value;
if(onum==""){
alert("数据不能为空！");
}else{
$("txtnum").value *= -1;
};
}
//退格键
function backspace(){
var txt = $("txtnum");
txt.value = txt.value.substring(0,txt.value.length-1);
if(txt.value==""){ txt.value=0; }
}
function math(op){
var onum = $("txtnum").value;
if(onum==""){alert("数据不能为空！");}
Boo = true;
with(Math){
switch (op){
case "sin": result = sin(onum);break;
case "cos": result = cos(onum);break;
case "tan": result = tan(onum);break;
case "asin": result = asin(onum);break;
case "acos": result = acos(onum);break;
case "atan": result = atan(onum);break;
case "PI": result = PI;break;
case "1/x": result = 1/onum;break;
case "exp": result = exp(onum);break;
case "lnx": result = log(onum);break;
case "lgx": result = log(onum)/log(10);break;
case "i": result = floor(onum);break;
case "int" :result =round(onum);break; //取整（四舍五入）
case "n!": result = jc(onum);break; //求阶乘
default: result = parseFloat(onum);
};
$("txtnum").value = result;
};
};
//阶乘计算
function jc(a){
if(a==1){
return 1;
}else{
return jc(a-1)*a;
}
}
/*
* indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
* 如果要检索的字符串值没有出现，则该方法返回 -1。
*
* substring() 方法用于提取字符串中介于两个指定下标之间的字符。
*
* with 语句用于设置代码在特定对象中的作用域。
*
* */
</script>
</body>
</html>
