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