<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易购物计算器</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div
{
width:800px;
margin:50px auto;
}
p{
padding:20px 0px;
}
h1,h3{
padding:20px 0px;
}
span{
margin-right:20px;
}
}
#addbutton2{
width:40px;
}
#subbutton2{
width:40px;
}
#mulbutton2{
width:40px;
}
#divbutton2{
width:40px;
}
</style>
<script type="text/javascript">
function computer(op)//op为形参
{
var num1,num2;
num1=parseFloat(document.myform.txtnum1.value);
num2=parseFloat(document.myform.txtnum2.value);
if(op=="+")
document.myform.txtresult.value=num1+num2;
if(op=="-")
document.myform.txtresult.value=num1-num2;
if(op=="*")
document.myform.txtresult.value=num1*num2;
if(op=="/" && num2!=0)
document.myform.txtresult.value=num1/num2; //重新给计算结果Input框赋值
}
</script>
</head>
<body>
<div>
<h1>欢迎来到小爱之家</h1>
<form name="myform" id="myform" method="post">
<h3>购物简易计算器</h3>
<p>第一个数<input type="text" name="txtnum1" class="textbaroder" id="txtnum1" size="25"></p>
<p>第二个数<input type="text" name="txtnum2" class="textbaroder" id="txtnum2" size="25"></p>
<span class="sp1"><input type="button" value="+" name="addbutton2" id="addbutton2" onClick="computer('+')"></span>
<span><input type="button" value="-" name="subbutton2" id="subbutton2" onClick="computer('-')"></span>
<span><input type="button" value="*" name="mulbutton2" id="mulbutton2" onClick="computer('*')"></span>
<span><input type="button" value="/" name="divbutton2" id="divbutton2" onClick="computer('/')"></span>
<p>计算结果<input type="text" name="txtresult" class="textbaroder" id="txtresult" size="25"></p>
</form>
</div>
</body>
</html>