这块是什么意思，老师给每个地方注释一下呗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<style>
body{
background-color: #eee;
}
.calculator{
margin: 200px 0 0 330px;
}
</style>
</head>
<body>
<div id="calculator" class="calculator">
<p>
<input type="text" class="formeInput" value="20">
<span class="sign">+</span>
<input type="text" class="laterInput" value="10">
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
<input type="button" value="+" class="btn" title="add">
<input type="button" value="-" class="btn" title="subtract">
<input type="button" value="×" class="btn" title="multiply">
<input type="button" value="÷" class="btn" title="divide">
</p>
</div>
<script>
// //第一次改写
// //获取元素
// var getElem = function(selector){
// return document.querySelector(selector);
// }
// var getElems = function(selector){
// return document.querySelectorAll(selector);
// }
// // 第一个文本框
// var formeInput = getElem(".formeInput");
// // 符号
// var sign = getElem(".sign");
// // 第二个文本框
// var laterInput = getElem(".laterInput");
// // 等于值
// var resultOutput = getElem(".resultOutput");
// // 按钮
// var btn = getElems(".btn");
// btn[0].onclick = addHandler;
// btn[1].onclick = subtractHandler;
// btn[2].onclick = multiplyHandler;
// btn[3].onclick = divideHandler;
// function addHandler(){
// sign.innerHTML = "+";
// resultOutput.innerHTML = +formeInput.value + +laterInput.value;
// }
// function subtractHandler(){
// sign.innerHTML = "-";
// resultOutput.innerHTML = +formeInput.value - +laterInput.value;
// }
// function multiplyHandler(){
// sign.innerHTML = "×";
// resultOutput.innerHTML = +formeInput.value * +laterInput.value;
// }
// function divideHandler(){
// sign.innerHTML = "÷";
// resultOutput.innerHTML = +formeInput.value / +laterInput.value;
// }
// //第二次改写-循环
// //获取元素
// var getElem = function(selector){
// return document.querySelector(selector);
// }
// var getElems = function(selector){
// return document.querySelectorAll(selector);
// }
// // 第一个文本框
// var formeInput = getElem(".formeInput");
// // 符号
// var sign = getElem(".sign");
// // 第二个文本框
// var laterInput = getElem(".laterInput");
// // 等于值
// var resultOutput = getElem(".resultOutput");
// // 按钮
// var btn = getElems(".btn");
// for(var i=0;i<btn.length;i++){
// btn[i].onclick = function(){
// switch(this.title){
// case "add":
// addHandler();break;
// case "subtract":
// subtractHandler();break;
// case "multiply":
// multiplyHandler();break;
// case "divide":
// divideHandler();break;
// }
// }
// }
// // btn[0].onclick = addHandler;
// // btn[1].onclick = subtractHandler;
// // btn[2].onclick = multiplyHandler;
// // btn[3].onclick = divideHandler;
// function addHandler(){
// sign.innerHTML = "+";
// resultOutput.innerHTML = +formeInput.value + +laterInput.value;
// }
// function subtractHandler(){
// sign.innerHTML = "-";
// resultOutput.innerHTML = +formeInput.value - +laterInput.value;
// }
// function multiplyHandler(){
// sign.innerHTML = "×";
// resultOutput.innerHTML = +formeInput.value * +laterInput.value;
// }
// function divideHandler(){
// sign.innerHTML = "÷";
// resultOutput.innerHTML = +formeInput.value / +laterInput.value;
// }
// 第三次改写-提取函数
//获取元素
var getElem = function(selector){
return document.querySelector(selector);
}
var getElems = function(selector){
return document.querySelectorAll(selector);
}
// 第一个文本框
var formeInput = getElem(".formeInput");
// 符号
var sign = getElem(".sign");
// 第二个文本框
var laterInput = getElem(".laterInput");
// 等于值
var resultOutput = getElem(".resultOutput");
// 按钮
var btn = getElems(".btn");
each(btn,function(index,elem){
elem.onclick = function(){
switch(this.title){
case "add":
addHandler();break;
case "subtract":
subtractHandler();break;
case "multiply":
multiplyHandler();break;
case "divide":
divideHandler();break;
}
}
});
function each(array,fn){
for(var i=0;i<array.length;i++){
fn(i,array[i]);
}
}
//封装一个加减乘除的函数
function updateSign(symbol){
sign.innerHTML = symbol;
}
updateSign("+");
updateSign("-");
updateSign("×");
updateSign("÷");
//封装一个算法的函数
function add(num1,num2){
return +num1 + +num2;
}
function subtract(num1,num2){
return num1 - num2;
}
function multiply(num1,num2){
return num1 * num2;
}
function divide(num1,num2){
return num1 / num2;
}
//封装一个结果的函数
function outputResult(result){
resultOutput.innerHTML = result;
}
//加
function addHandler(){
updateSign("+");
outputResult(add(formeInput.value,laterInput.value))
}
//减
function subtractHandler(){
updateSign("-");
outputResult(subtract(formeInput.value,laterInput.value))
}
//乘
function multiplyHandler(){
updateSign("×");
outputResult(multiply(formeInput.value,laterInput.value))
}
//除
function divideHandler(){
updateSign("÷");
outputResult(divide(formeInput.value,laterInput.value))
}
</script>
</body>
</html>
47
收起
正在回答
2回答
同学你好，解答如下：
1、注释如下：
// 封装for循环为each函数。第一个参数传入的是数组，第二个参数传入的是一个函数。
function each(array, fn) {
// console.log(fn) 可以打印看下
for (var i = 0; i < array.length; i++) {
//fn是和each的function是同一个函数。将fn回调函数作为一个整体，当作第二个参数传给了each函数
fn(i, array[i]);
}
}
// 调用each方法，传入两个参数，一个是array->btn;一个是函数fn->function(index, elem){}
each(btn, function(index, elem) {
// 函数有两个参数，一个是索引，一个是4个按钮
elem.onclick = function() {
// 通过switch方法实现 根据不同条件，调用不同方法
switch (this.title) {
case "add":
addHandler();
break;
case "subtract":
subtractHandler();
break;
case "multiply":
multiplyHandler();
break;
case "divide":
divideHandler();
break;
}
}
});2、为什么要用fn？函数得先调用才会执行，定义了一个each函数，先使用each（）调用并传入两个实参。each的实参把值赋值给实参。然后fn就是一个匿名函数，函数中调用了fn（）就会为元素绑定点击事件了可 参考下图：
3、视频中这样的操作， 其实是想传达一个实践中推荐的编程方法，即组件化。 可能用于现在的计算机项目里面，有一些多余。 但是实际中换成是一个大型的项目，可能拆分封装成小的函数会更好，一方面可读性和逻辑性更强， 当团队开发的时候，其他的同事来看我们的代码，就不需要去深入掰清楚每一行代码代表的含义， 只需要通过函数名就能够知道实现什么功能， 节约阅读效率。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
宝慕林3013065
2020-06-04 17:54:22
还有这个地方为啥要用fn呢，感觉这么写完之后比上一个循环的代码量要多了呢，有啥意义吗
相似问题
麻烦老师给每一行代码注释
9
0
3
老师搞不明白这个正则表达式这一条是啥意思？能否详细解释下
30
0
11
解释下这三个的含义意思
0
0
5
注释是什么意思
10
0
2
老师这一句代码什么意思？
31
0
4
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星