首先是显示页面的制作主要是css和HTML知识
css:
*{padding: 0;
margin: 0;}
table{
position: absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-200px;
width:400px;
height: 400px;
border: 2px solid red;
text-align: center;
table-layout: fixed;
border-spacing: 0;
}
tr>td{
border: 1px solid black;
}
input{
height:100%;
width:100%;
font-size: 20px;
}
html:
<form name="first">
<table>
<tr><td colspan="6"><input type="text" name="result" value="0"></td></tr>
<tr>
<td><input type="button" value="sin" onclick="usefunc('sin')"></td>
<td><input type="button" value="cos" onclick="usefunc('cos')"></td>
<td><input type="button" value="1" onclick="addnum('1')"></td>
<td><input type="button" value="2" onclick="addnum('2')"></td>
<td><input type="button" value="3" onclick="addnum('3')"></td>
<td><input type="button" value="+" onclick="addsign('+')"></td>
</tr>
<tr>
<td><input type="button" value="asin" onclick="usefunc('asin')"></td>
<td><input type="button" value="acos" onclick="usefunc('acos')"></td>
<td><input type="button" value="4" onclick="addnum('4')"></td>
<td><input type="button" value="5" onclick="addnum('5')"></td>
<td><input type="button" value="6" onclick="addnum('6')"></td>
<td><input type="button" value="-" onclick="addsign('-')"></td>
</tr>
<tr>
<td><input type="button" value="tan" onclick="usefunc('tan')"></td>
<td><input type="button" value="atan" onclick="usefunc('atan')"></td>
<td><input type="button" value="7" onclick="addnum('7')"></td>
<td><input type="button" value="8" onclick="addnum('8')"></td>
<td><input type="button" value="9" onclick="addnum('9')"></td>
<td><input type="button" value="*" onclick="addsign('*')"></td>
</tr>
<tr>
<td><input type="button" value="log" onclick="usefunc('log')"></td>
<td><input type="button" value="exp" onclick="usefunc('exp')"></td>
<td><input type="button" value="0" onclick="addnum('0')"></td>
<td><input type="button" value="." onclick="addpoint()"></td>
<td><input type="button" value="=" onclick="count()"></td>
<td><input type="button" value="/" onclick="addsign('/')"></td>
</tr>
<tr>
<td><input type="button" value="sqrt" onclick="usefunc('sqrt')"></td>
<td><input type="button" value="1/x" onclick="usefunc('1/x')"></td>
<td><input type="button" value="pi" onclick="usefunc('pi')"></td>
<td><input type="button" value="E" onclick="usefunc('E')"></td>
<td colspan="2"><input type="button" value="清除" onclick="cleantext()"></td>
</tr>
</table>
</form>
我这里用的有些繁杂,也可以只利用表格不用表单元素,例如给table添加一点击事件,利用event.srcElement.innerText赋给结果,
用js来进行交互,下面是js:
<script type="text/javascript">
var pro=true;
var cur=true;
//addnum()输入数字 其中cur设为true是使数字能够连续进行计算像1+2+3
function addnum(i) {
if(first.result.value=="0")
{
first.result.value=i;
}
else{
first.result.value+=i;
}
cur=true;
}
//addpoint()中Pro设为false的原因是防止连续出现两个点例如..
function addpoint(){
if(pro){
first.result.value+=".";
pro=false;
}
}
//添加+-*/符号 Pro设置为true的原因是能够再次输入数字从而进行计算
function addsign(i){
if(cur){
first.result.value+=i;
pro=true;
cur=false;
}
}
//结果语句
function count(){
first.result.value=eval(first.result.value);
cur=true;
}
//清零语句
function cleantext(){
first.result.value="0";
}
//利用switch语句来进行选择函数,然后利用Math函数计算答案
function usefunc(func){
switch(func){
case "sin":
first.result.value=Math.sin(first.result.value);
cur=ture;
break;
case "cos":
first.result.value=Math.cos(first.result.value);
cur=ture;
break;
case "asin":
first.result.value=Math.asin(first.result.value);
cur=ture;
break;
case "acos":
first.result.value=Math.acos(first.result.value);
cur=ture;
break;
case "tan":
first.result.value=Math.tan(first.result.value);
cur=ture;
break;
case "atan":
first.result.value=Math.atan(first.result.value);
cur=ture;
break;
case "log":
first.result.value=Math.log(first.result.value);
cur=ture;
break;
case "exp":
first.result.value=Math.exp(first.result.value);
cur=ture;
break;
case "sqrt":
first.result.value=Math.sqrt(first.result.value);
cur=ture;
break;
case "1/x":
first.result.value=1/first.result.value;
cur=ture;
break;
case "pi":
first.result.value=Math.PI;
cur=ture;
break;
case "E":
first.result.value=Math.E;
cur=ture;
break;
}
}
</script>
这些只是实现了计算器的部分功能,自此完结。请大佬们多多指点。多多评论^_^