<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
margin: 0;
padding:10px;
border: 0;
}
#text1,#text2 {
width:150px;
height: 40px;
border: 1px solid #AFAEAE;
}
#div1 {
width:400px;
height: 80px;
border: 1px solid #AFAEAE;
}
#btn1,#btn5,#btn3,#btn4 {
height: 50px;
width: 40px;
background: #E39E2D;
}
</style>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="button" value="加" />
<input type="button" value="减" />
<input type="button" value="乘" />
<input type="button" value="除" />
<br>
<br>
<div ></div>
<script type="text/javascript">
var txt1=document.getElementById('text1');
var txt2=document.getElementById('text2');
var btn1=document.getElementById('btn1');
var btn5=document.getElementById('btn5');
var btn2=document.getElementById('btn3');
var btn2=document.getElementById('btn4');
var div=document.getElementById('div1');
btn1.onclick=function()//加法
{
var n1=parseInt(txt1.value);
var n2=parseInt(txt2.value);
if(isNaN(n1))
{
div.innerHTML='您输入的第一个数字有误！';
}
else if(isNaN(n2))
{
div.innerHTML='您输入的第一个数字有误！';
}
else{
div.innerHTML=(n1+n2);
}
}
btn5.onclick=function()//加法
{
var n1=parseInt(txt1.value);
var n2=parseInt(txt2.value);
if(isNaN(n1))
{
div.innerHTML='您输入的第一个数字有误！';
}
else if(isNaN(n2))
{
div.innerHTML='您输入的第一个数字有误！';
}
else{
div.innerHTML=(n1-n2);
}
}
btn3.onclick=function()//乘法
{
var n1=parseInt(txt1.value);
var n2=parseInt(txt2.value);
if(isNaN(n1))
{
div.innerHTML='您输入的第一个数字有误！';
}
else if(isNaN(n2))
{
div.innerHTML='您输入的第一个数字有误！';
}
else{
div.innerHTML=(n1*n2);
}
}
btn4.onclick=function()//除法
{
var n1=parseInt(txt1.value);
var n2=parseInt(txt2.value);
if(isNaN(n1))
{
div.innerHTML='您输入的第一个数字有误！';
}
else if(isNaN(n2))
{
div.innerHTML='您输入的第一个数字有误！';
}
else{
div.innerHTML=(n1/n2);
}
}
</script>
</body>
</html>