效果图
下载地址https://download.csdn.net/download/qq_15715889/85772461
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<link rel="stylesheet" type="text/css" href="css/calcdemo.css"/>
<!--引入脚本-->
<script src="js/calcdemo.js" type="text/javascript" charset="utf-8"></script>
</head>
<script>
function a1(){
var ja1=document.getElementById("sz1").value;
var ja2=document.getElementById("sz2").value;
ja1=parseFloat(ja1);ja2=parseFloat(ja2);
var ja=ja1+ja2;
document.getElementById("j").value=ja;
}
function a2(){
var ja1=document.getElementById("sz1").value;
var ja2=document.getElementById("sz2").value;
ja1=parseFloat(ja1);ja2=parseFloat(ja2);
var ja=ja1-ja2;
document.getElementById("j").value=ja;
}
function a3(){
var ja1=document.getElementById("sz1").value;
var ja2=document.getElementById("sz2").value;
ja1=parseFloat(ja1);ja2=parseFloat(ja2);
var ja=ja1*ja2;
document.getElementById("j").value=ja;
}
function a4(){
var ja1=document.getElementById("sz1").value;
var ja2=document.getElementById("sz2").value;
ja1=parseFloat(ja1);ja2=parseFloat(ja2);
var ja=ja1/ja2;
document.getElementById("j").value=ja;
}
</script>
<body>
<form action="" method="post">
<table id="tab" border="1" >
<tr>
<td >请输入第一个数:</td>
<td><input id="sz1" type="text" name="num1" id="num1"/></td>
</tr>
<tr>
<td>请输入第二个数:</td>
<td><input id="sz2" type="text" name="num2" id="num2"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="+" onClick="a1()">
<input type="button" value="-" onClick="a2()">
<input type="button" value="*" onClick="a3()">
<input type="button" value="/" onClick="a4()">
</td>
</tr>
<tr>
<td align="right">结果:</td>
<td><input type="text" id="j" name="result" id="result"/></td>
</tr>
</table>
</form>
</body>
</html>