拿js写了个网页计算器的小程序,代码如下,程序员新人,有可以改进的地方还望指点。(不支持/和百分号)
首先是CSS和HTML部分
<!DOCUMENT html>
<html>
<head>
<style>
*{
margin:0 auto;
padding:0;
}
.box1{
width:25%;
height:16%;
}
input{
width:100%;
height:106%;
font-size:150%;
}
</style>
</head>
<body>
<table align="center" height="500px" width="400px" border="solid 1px" cellspacing="0">
<tr>
<td colspan="4">
<input type="text" id="window"
style="width:100%;height:100%;text-align:left;font-size:200%;" readonly="readonly"/>
</td>
</tr>
<tr>
<td class="box1"><input type="button" value="AC" οnclick="bbb(this.value)"></td>
<td class="box1"><input type="button" value="/"></td>
<td class="box1"><input type="button" value="%"></td>
<td class="box1"><input type="button" value="÷" οnclick="bbb(this.value)"></td>
</tr>
<tr>
<td class="box1"><input type="button" value="7" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="8" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="9" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="*" οnclick="bbb(this.value)"></td>
</tr>
<tr>
<td class="box1"><input type="button" value="4" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="5" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="6" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="—" οnclick="bbb(this.value)"></td>
</tr>
<tr>
<td class="box1"><input type="button" value="1" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="2" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="3" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="+" οnclick="bbb(this.value)"></td>
</tr>
<tr>
<td class="box1" colspan="2"><input type="button" value="0" οnclick="aaa(this.value)"></td>
<td class="box1"><input type="button" value="." οnclick="bbb(this.value)"></td>
<td class="box1"><input type="button" value="=" οnclick="bbb(this.value)"></td>
</tr>
</table>
<body>
以下是js逻辑,用了4个变量实现加减乘除包括浮点数运算。
<script>
var b="" <!--用于记录小数点-->
var c=""; <!--用于记录表单提交的数字-->
var d=""; <!--用于记录表单提交的符号-->
var e=""; <!--用于记录计算结果-->
<!--记录数字的方法,点击的数字提交到aaa()-->
function aaa(num){
<!--上一次操作是=号时,先重置所有数据再输入数字-->
if(d=="="){
hehe();
}
if(c.length>=16){
alert("输入的数太大了");return;
}
c=c+String(num);
<!--第一个数直接被记录为计算结果-->
if(d==""){
e=c;
}
document.getElementById("window").value=c;
}
<!--记录符号的方法,点击的符号提交到bbb()-->
function bbb(lol){
if(lol=="AC"){
hehe();return;
}
<!--小数点被记录为数字,并不再向下执行-->
if(lol=="."){
c=c+String(lol);b=lol;
document.getElementById("window").value=c;return;
}
<!--根据输入的符号计算,先调用计算方法而后给变量d赋值防止第一次点击错误计算-->
duang();
d=lol;
document.getElementById("window").value=d;
if(d=="="){
result();
}
c="";
}
<!--输出计算结果的方法-->
function result(){
document.getElementById("window").value=e;
}
<!--计算方法,根据上一次数据的符号计算出前两次的结果-->
function duang(){
if(d=="+"){e=Number(e)+Number(c);}
if(d=="—"){e=Number(e)-Number(c);}
if(d=="*"){e=Number(e)*Number(c);}
if(d=="÷"){e=Number(e)/Number(c);}
}
<!--重置方法-->
function hehe(){
b="";c="";d="";e="";f=0;document.getElementById("window").value="";
}
</script>
</html>