做一个简单地计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算机</title>
<style>
input{width: 50px;height: 50px; font-size: 26px; color: green; background-color: yellow;}
.w{width: 50px;height: 50px; font-size: 26px; color: red; background-color: green;border-radius:50%;}
</style>
</head>
<body bgcolor="39c5bb">
<center><font size="8" color="black" style="font-weight: bold;">
我的计算机
</font></center>
<script language="JavaScript">
function demo(val){
//首先使文本框显示点击的数字并且排列
document.getElementById("txt").value+=val;
}
function showResult(){
//获取上边显示的并赋值给a
var a = document.getElementById("txt").value;
//使用eval运算a
var vb=eval(a);
//显示得出的结果
document.getElementById("txt").value=vb;
}
</script>
<table border="3" align="center">
<tr>
<td colspan="4">
<input type="text" value="" readonly="readonly" style="width: 215px;height: 50px;font-size: 26px; color: green; background-color:yellow" id="txt"/>
</td>
</tr>
<tr>
<td><input type="button" value="7" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="8" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="9" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="/" class="w" οnclick="demo(this.value)"</td>
</tr>
<tr>
<td><input type="button" value="4" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="5" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="6" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="*" class="w" οnclick="demo(this.value)"</td>
</tr>
<tr>
<td><input type="button" value="1" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="2" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="3" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="+" class="w" οnclick="demo(this.value)"</td>
</tr>
<tr>
<td><input type="button" value="0" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="." class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="-" class="w" οnclick="demo(this.value)"</td>
<td><input type="button" value="=" class="w" οnclick="showResult(this.value)"</td>
</tr>
</table>
</body>
</html>
这个是成果图