1.效果
2.代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> <!--计算函数 --> function calculate(){ var num1_obj = document.getElementById("num1").value;<!--获取第一个输入框的值(字符串来的) --> var num2_obj = document.getElementById("num2").value;<!--获取第二个输入框的值(字符串来的)--> var result = document.getElementById("result"); var num1 = parseFloat(num1_obj);<!-- 把字符串变成浮点数--> var num2 = parseFloat(num2_obj); var operator = document.getElementById("operator").value;<!--获取选择的运算符 --> if(operator == "+"){ <!-- 若为加法运算--> result.value = num1 + num2; isErr(result.value); } else if(operator == "-"){ <!-- 若为减法运算--> result.value = num1 - num2; isErr(result.value); } else if(operator == "*"){ <!-- 若为乘法运算--> result.value = num1 * num2; isErr(result.value); } else if(operator == "/"){ <!-- 若为除法运算--> result.value = num1 / num2; isErr(result.value); } } <!-- 判断输出结果是否正常--> function isErr(result){ if(result == Infinity || result =="NaN"){ alert("输入计算数据异常"); } } </script> <head> <body> <input type="text" id="num1"> <select id="operator"> <!-- 运算符的选择下拉菜单--> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="num2"> = <input type="text" id="result"> <input type="button" value="点击计算" onclick="calculate()"> </body> </html>