1、题目
2、素材
链接：https://pan.baidu.com/s/1X3sv4gX0V396FtK1H5f3LQ
提取码：52cp
复制这段内容后打开百度网盘手机App，操作更方便哦
3、代码
3.1 index.html
原始代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页计算器</title>
<!--<script (1) =" (2) " type="text/javascript" charset="utf-8"></script>-->
<script (1) =" (2) " type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--<p>整数1：< (3) id=" (4) " type="text"></p>-->
<p>整数1：< (3) id=" (4) " type="text"></p>
<!--<p>整数2：< (3) id=" (5) " type="text"></p>-->
<p>整数2：< (3) id=" (5) " type="text"></p>
<p>
<input type="button" value="相加" (6) =" (7) "><!--点击按钮调用calc函数-->
<input type="button" value="相减" (6) =" (8) "><!--点击按钮调用calc函数-->
<input type="button" value="相乘" (6) =" (9) "><!--点击按钮调用calc函数-->
<input type="button" value="相除" (6) =" (10) "><!--点击按钮调用calc函数-->
</p>
<!--<p>结果：< (3) id="result" type="text" readonly></p>-->
<p>结果：< (3) id="result" type="text" readonly></p>
</body>
</html>
修改后代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页计算器</title>
<!--<script (1) =" (2) " type="text/javascript" charset="utf-8"></script>-->
<script src ="./js/index.js" type="text/javascript" charset="utf-8"></script> <!--刘老师解析：文件来源-->
</head>
<body>
<!--<p>整数1：< (3) id=" (4) " type="text"></p>-->
<p>整数1：<input id="num1" type="text"></p> <!--刘老师解析：index.js里面的getElementById('num1')-->
<!--<p>整数2：< (3) id=" (5) " type="text"></p>-->
<p>整数2：<input id="num2" type="text"></p><!--刘老师解析：index.js里面的getElementById('num2')-->
<p>
<input type="button" value="相加" onclick="calc(add)"><!--点击按钮调用calc函数--><!--刘老师解析：注意要传入函数作为参数进去-->
<input type="button" value="相减" onclick="calc(sub)"><!--点击按钮调用calc函数--><!--刘老师解析：注意要传入函数作为参数进去-->
<input type="button" value="相乘" onclick="calc(mul)"><!--点击按钮调用calc函数--><!--刘老师解析：注意要传入函数作为参数进去-->
<input type="button" value="相除" onclick="calc(div)"><!--点击按钮调用calc函数--><!--刘老师解析：注意要传入函数作为参数进去-->
</p>
<!--<p>结果：< (3) id="result" type="text" readonly></p>-->
<p>结果：<input id="result" type="text" readonly></p>
</body>
</html>
3.2index.js
function calc(func) {
/*var result = (11) ;*/
/*var num1 = (12) (document.getElementById('num1').value);*/
/*var num2 = (12) (document.getElementById('num2').value);*/
var result = (11) ; /*通过id获取存放结果的DOM元素*/
var num1 = (12) (document.getElementById('num1').value);/*将字符串转换成数字*/
var num2 = (12) (document.getElementById('num2').value);/*将字符串转换成数字*/
if ( (13) || (14) ) { /*判断两个数是否都是数字*/ /*第(13)和(14)空*/
alert('请输入数字');
(15) false; /*返回布尔值*/ /*(15) 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;
}
修改后：
function calc(func) {
/*var result = (11) ;*/
/*var num1 = (12) (document.getElementById('num1').value);*/
/*var num2 = (12) (document.getElementById('num2').value);*/
var result = document.getElementById('result'); /*通过id获取存放结果的DOM元素；刘老师解析：常识*/
var num1 = Number(document.getElementById('num1').value);/*将字符串转换成数字；刘老师解析：用转换的方法*/
var num2 = Number(document.getElementById('num2').value);/*将字符串转换成数字；刘老师解析：用转换的方法*/
if ( isNaN(num1)|| isNaN(num2) ) { /*判断两个数是否都是数字*/ /*第(13)和(14)空，刘老师解析：isNaN()函数是非空的意思*/
alert('请输入数字');
return false; /*返回布尔值*/ /*(15) false;刘老师解析：返回return*/
}
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;
}
