js自学网站推荐:http://www.51zxw.net/study.asp?vip=4857021
<!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="清除" οnclick="txtnum.value='0';result=0">
<input type="button" value="退格" οnclick="backspace()">
</td>
</tr>
<tr>
<td>
<table id="tab_1">
<tr>
<td><input type="button" value="sin" οnclick="math('sin')"></td>
<td><input type="button" value="cos" οnclick="math('cos')"></td>
<td><input type="button" value="tan" οnclick="math('tan')"></td>
</tr>
<tr>
<td><input type="button" value="asin" οnclick="math('asin')"></td>
<td><input type="button" value="acos" οnclick="math('acos')"></td>
<td><input type="button" value="atan" οnclick="math('atan')"></td>
</tr>
<tr>
<td><input type="button" value="PI" οnclick="math('PI')"></td>
<td><input type="button" value="1/x" οnclick="math('1/x')"></td>
<td><input type="button" value="exp" οnclick="math('exp')"></td>
</tr>
<tr>
<td><input type="button" value="lnx" οnclick="math('lnx')"></td>
<td><input type="button" value="lgx" οnclick="math('lgx')"></td>
<td><input type="button" value="n!" οnclick="math('n!')"></td>
</tr>
</table>
</td>
<td>
<table id="tab_2">
<tr>
<td><input type="button" value="7" οnclick="num(7)"></td>
<td><input type="button" value="8" οnclick="num(8)"></td>
<td><input type="button" value="9" οnclick="num(9)"></td>
</tr>
<tr>
<td><input type="button" value="4" οnclick="num(4)"></td>
<td><input type="button" value="5" οnclick="num(5)"></td>
<td><input type="button" value="6" οnclick="num(6)"></td>
</tr>
<tr>
<td><input type="button" value="1" οnclick="num(1)"></td>
<td><input type="button" value="2" οnclick="num(2)"></td>
<td><input type="button" value="3" οnclick="num(3)"></td>
</tr>
<tr>
<td><input type="button" value="0" οnclick="num(0)"></td>
<td><input type="button" value="." οnclick="decimal()"></td>
<td><input type="button" value="=" οnclick="compute('=')"></td>
</tr>
</table>
</td>
<td>
<table id="tab_3">
<tr>
<td><input type="button" value="+" οnclick="compute('+')"></td>
<td><input type="button" value="取整" οnclick="math('int')"></td>
</tr>
<tr>
<td><input type="button" value="-" οnclick="compute('-')"></td>
<td><input type="button" value="取余" οnclick="compute('%')"></td>
</tr>
<tr>
<td><input type="button" value="*" οnclick="compute('*')"></td>
<td><input type="button" value="x^y" οnclick="compute('x^y')"></td>
</tr>
<tr>
<td><input type="button" value="/" οnclick="compute('/')"></td>
<td><input type="button" value="+/-" οnclick="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>
![](https://i-blog.csdnimg.cn/blog_migrate/fa5a27ad88f7ad56881943bcb29063ea.png)