上课时给学生做的一个Javascript计算器例子,有兴趣的朋友可以研究一下。
代码如下:
<head>
<style type=text/css>
TD.title{
font-size:12px;
color:#FFFFFF;
background-color:#000000;
text-align:center;
}
INPUT.number{
width:50px;
color:#FF0000;
}
INPUT.operater{
width:50px;
color:#0000FF;
}
</style>
<script language=javascript>
function getnum(num){
if(parseFloat(disp.value)!=0)
disp.value = disp.value + num;
else
disp.value = num;
}
function jisuan(){
result = eval(disp.value);
disp.value = result;
}
</script>
</head>
<body bgcolor=#000000>
<table border=1 bordercolor="pink" width=200 align=center
bgcolor=pink>
<tr>
<td colspan=4 class=title>自己做个计算器</font></td>
</tr>
<tr>
<td colspan=4><input type=text name=disp value="0" style="text-
align:right;width:215px;color:#0000FF"></td>
</tr>
<tr>
<td><input type=button value=0 class="number" onclick="getnum
(this.value)"></td>
<td><input type=button value=1 class="number" onclick="getnum
(this.value)"></td>
<td><input type=button value=2 class="number" onclick="getnum
(this.value)"></td>
<td><input type=button value=+ class="operater" onclick="getnum
(this.value)"></td>
</tr>
<tr>
<td><input type=button value=3 class="number" onclick="getnum
(this.value)"></td>
<td><input type=button value=4 class="number" onclick="getnum
(this.value)"></td>
<td><input type=button value=5 class="number" onclick="getnum
(this.value)"></td>
<td><input type=button value=- class="operater" onclick="getnum
(this.value)"></td>
</tr>
<tr>
<td><input type=button value=6 class="number" onclick="getnum
(this.value)"></td>
<td><input type=button value=7 class="number"" onclick="getnum
(this.value)"></td>
<td><input type=button value=8 class="number" onclick="getnum
(this.value)"></td>
<td><input type=button value=* class="operater" onclick="getnum
(this.value)"></td>
</tr>
<tr>
<td><input type=button value=9 class="number" onclick="getnum
(this.value)"></td>
<td><input type=button value="(" class="operater" onclick="getnum
(this.value)"></td>
<td><input type=button value=")" class="operater" onclick="getnum
(this.value)"></td>
<td><input type=button value="." class="operater" onclick="getnum
(this.value)"></td>
</tr>
<tr>
<td><input type=button value="Help" style="width:50px"
onclick="alert('程序制作:17php.com')"></td>
<td><input type=button value="C" class="operater"
onclick="disp.value='0'"></td>
<td><input type=button value="=" class="operater" onclick="jisuan
()"></td>
<td><input type=button value="/" class="operater" onclick="getnum
(this.value)"></td>
</tr>
<tr><td colspan=4 class=title>版权没有 欢迎试用</td></tr>
</table>
直接复制代码,存为html即可查看效果。
运行效果见附图。
相关附件如下: |