优化代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/calculator.css" type="text/css" rel="stylesheet"/> </head> <body> <form> <h2>简易网页计算器</h2> <p>整数1:<input id="num1" type-"text"></p> <p>整数2:<input id="num2" type-"text"></p> <p> <input type="button" class="btn" value="+" onclick="calc(add)"> <input type="button" class="btn" value="-" onclick="calc(sub)"> <input type="button" class="btn" value="×" onclick="calc(mul)"> <input type="button" class="btn" value="÷" onclick="calc(div)"> <input type="reset" class="btn" value="CE"> </p> <p> 结 果:<input id="result" type="text" readonly> </p> </form> <script> function calc(func){ var result = document.getElementById('result'); var num1 = parseInt(document.getElementById('num1').value); var num2 = parseInt(document.getElementById('num2').value); if(isNaN(num1) || isNaN(num2)){ alert('请输入数字'); return false; } result.value = func(num1, num2); } function add(num1, num2){//加法 return num1 + num2; } function sub(num1, num2){//减法 return num1 - num2; } function mul(num1, num2){//乘法 return num1 * num2; } function div(num1, num2){//除法 if(num2 === 0) { alert('除数不能为0'); return''; } return num1 / num2; } </script> </body> </html>
时间: 2023-07-19 10:37:46 浏览: 145
以下是代码的优化建议:
1. 在 HTML 标记中,需要将 type-"text" 改为 type="text"。
2. 在 JavaScript 中,可以使用严格相等运算符(===)进行判断,这样会更加严谨。
3. 可以将 num1 和 num2 的获取和判断提取出来,这样可以避免重复代码。
4. 可以将输入数字的提示信息提取出来,放在一个变量中,方便修改和管理。
5. 可以将除数为 0 的判断提取出来,放在一个变量中,方便修改和管理。
6. 可以将四个函数的名称改为更加具有意义的名称,例如 add、sub、mul、div 改为 addNum、subNum、mulNum、divNum。
以下是优化后的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/calculator.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<form>
<h2>简易网页计算器</h2>
<p>整数1:<input id="num1" type="text"></p>
<p>整数2:<input id="num2" type="text"></p>
<p>
<input type="button" class="btn" value="+" onclick="calc(addNum)">
<input type="button" class="btn" value="-" onclick="calc(subNum)">
<input type="button" class="btn" value="×" onclick="calc(mulNum)">
<input type="button" class="btn" value="÷" onclick="calc(divNum)">
<input type="reset" class="btn" value="CE">
</p>
<p>
结 果:<input id="result" type="text" readonly>
</p>
</form>
<script>
var num1Ele = document.getElementById('num1');
var num2Ele = document.getElementById('num2');
var resultEle = document.getElementById('result');
var inputNumMsg = '请输入数字';
var divZeroMsg = '除数不能为0';
function calc(func){
var num1 = parseInt(num1Ele.value);
var num2 = parseInt(num2Ele.value);
if(isNaN(num1) || isNaN(num2)){
alert(inputNumMsg);
return false;
}
resultEle.value = func(num1, num2);
}
function addNum(num1, num2){//加法
return num1 + num2;
}
function subNum(num1, num2){//减法
return num1 - num2;
}
function mulNum(num1, num2){//乘法
return num1 * num2;
}
function divNum(num1, num2){//除法
if(num2 === 0) {
alert(divZeroMsg);
return'';
}
return num1 / num2;
}
</script>
</body>
</html>
阅读全文