第五次修改和第六次修改听的就不太明白了。。。
方法一
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
</head>
<body>
<input type='text' id='num1' />
<select id='operate'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='num2' />
<input type='button' value=' = ' onclick="count()" />
<input type='text' id='result'/>
<script type="text/javascript">
function count() {
/*此处写代码*/
var all = {
frist:document.querySelector('#num1'),
second:document.querySelector('#num2'),
last:document.querySelector('#result'),
operate:document.querySelector('#operate')
}
if(isNaN(all.frist.value) || isNaN(all.second.value)){
alert('请输入数字');
throw new Error('不是数字');
}
switch(all.operate.value){
case '+':
return all.last.value = +all.frist.value + +all.second.value;break;
case '-':
return all.last.value = all.frist.value - all.second.value;break;
case '*':
return all.last.value = all.frist.value * all.second.value;break;
case '/':
return all.last.value = all.frist.value / all.second.value;break;
}
}
</script>
</body>
</html>方法二
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
</head>
<body>
<input type='text' id='num1' />
<select id='operate'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='num2' />
<input type='button' value=' = ' onclick="count()" />
<input type='text' id='result'/>
<script type="text/javascript">
function count() {
/*此处写代码*/
var all = {
frist:document.querySelector('#num1'),
second:document.querySelector('#num2'),
last:document.querySelector('#result'),
operate:document.querySelector('#operate')
}
var operation = {
add:function(num1,num2){
return +num1 + +num2;
},
subtract:function(num1,num2){
return num1 - num2;
},
multiply:function(num1,num2){
return num1 * num2;
},
divide:function(num1,num2){
return num1 / num2;
}
}
function outputResult(result){
all.last.value = result;
}
if(isNaN(all.frist.value) || isNaN(all.second.value)){
alert('请输入数字');
throw new Error('输入的不是数字');
}
switch(operate.value){
case '+':
outputResult(operation.add(all.frist.value,all.second.value));break;
case '-':
outputResult(operation.subtract(all.frist.value,all.second.value));break;
case '*':
outputResult(operation.multiply(all.frist.value,all.second.value));break;
case '/':
outputResult(operation.divide(all.frist.value,all.second.value));break;
}
}
</script>
</body>
</html>老师第五次修改和第六次修改真听不明白了，这两种方法可以吗，感觉越老越绕
9
收起
正在回答
2回答
同学你好，对于你的问题解答如下：
老师进行多次修改，主要是在原来的基础上进行封装，目的是为了将功能相似的代码封装成函数，方便后期调用，这里的项目比较小，同学可能体会不到这么做的好处，可以先跟着老师学习封装的思想，培养编码习惯。
后面的组件化项目中，也会继续采用这种封装的思想去实现效果，到时候同学会更加清晰直观的感受到封装的好处了。
因为这样的写法并不存在语法错误，只不过是最后计算的结果不对而已，不会出现报错的
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
宝慕林3013065
2020-06-05 13:52:43
还有我这前这块复制完忘改了，全是+，为什么也不报错呢
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星