<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" id="text1" /> <input type="text" id="text2" /> <input type="button" id="btn1" value="加" /> <input type="button" id="btn5" value="减" /> <input type="button" id="btn3" value="乘" /> <input type="button" id="btn4" value="除" /> <br> <br> <div id="div1"></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>