由于主要是逻辑的实现,就没有过多的样式,效果图如下
HTML代码
<div id="calculator">
<p>
<input type="text" class="formerInput" value="1" />
<span class="sign">+</span>
<input type="text" class="laterInput" value="1" />
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
<!-- <input type="button" value="+" onclick="addHandler();" />
<input type="button" value="-" onclick="subtractHandler();" />
<input type="button" value="×" onclick="multiplyHandler();" />
<input type="button" value="÷" onclick="divideHandler();" /> -->
<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" />
<input type="button" value="%" class="btn" title="mod" />
<input type="button" value="^" class="btn" title="power" />
<input type="button" value="1/x" class="btn" title="invert" />
</p>
</div>
<br />// 获取元素
var calculator = document.querySelector('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');
// 加
function addHandler() {
sign.innerHTML = '+';
//前面的加号是为了将字符串转换为数字
resultOutput.innerHTML = +formerInput.value + +laterInput.value;
}
// 减
function subtractHandler() {
sign.innerHTML = '-';
//减法不用将字符串转换为数字,直接运算
resultOutput.innerHTML = formerInput.value - laterInput.value;
}
// 乘
function multiplyHandler() {
sign.innerHTML = '×';
resultOutput.innerHTML = formerInput.value * laterInput.value;
}
// 除
function divideHandler() {
sign.innerHTML = '÷';
resultOutput.innerHTML = formerInput.value / laterInput.value;
}
//HTML结构改变,行为与结构分离,删除onclick时间,统一加上btn类。
<input type="button" value="+" class="btn" />
<input type="button" value="-" class="btn" />
<input type="button" value="×" class="btn" />
<input type="button" value="÷" class="btn" />
//JavaScript代码
// 获取元素
var calculator = document.querySelector('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');
//这里querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问,索引值从 0 开始。
var btns = calculator.querySelectorAll('.btn');
// 绑定事件
// +
btns[0].onclick = addHandler; //绑定函数名,不要带括号表示执行。
// -
btns[1].onclick = subtractHandler;
// ×
btns[2].onclick = multiplyHandler;
// ÷
btns[3].onclick = divideHandler;
// 加
function addHandler() {
sign.innerHTML = '+';
resultOutput.innerHTML = +formerInput.value + +laterInput.value;
}
// 减
function subtractHandler() {
sign.innerHTML = '-';
resultOutput.innerHTML = formerInput.value - laterInput.value;
}
// 乘
function multiplyHandler() {
sign.innerHTML = '×';
resultOutput.innerHTML = formerInput.value * laterInput.value;
}
// 除
function divideHandler() {
sign.innerHTML = '÷';
resultOutput.innerHTML = formerInput.value / laterInput.value;
}
主要对上一段代码中绑定事件做优化
//增加title更加语义化。
<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" />
//JavaScript代码,仅对绑定事件优化
//绑定事件,通过循环结构绑定事件
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
switch (this.title) {
case 'add':
addHandler();
break;
case 'subtract':
subtractHandler();
break;
case 'multiply':
multiplyHandler();
break;
case 'divide':
divideHandler();
break;
}
};
}
不希望代码暴露过多的细节,可以利用函数封装代码。
//JavaScript代码
//获取元素部分不变
//绑定事件
each(btns, 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;
}
// 加法
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() {
// sign.innerHTML = '+';
updateSign('+');
outputResult(add(formerInput.value, laterInput.value));
}
// 减
function subtractHandler() {
updateSign('-');
outputResult(subtract(formerInput.value, laterInput.value));
}
// 乘
function multiplyHandler() {
updateSign('×');
outputResult(multiply(formerInput.value, laterInput.value));
}
// 除
function divideHandler() {
updateSign('÷');
outputResult(divide(formerInput.value, laterInput.value));
}
上一段代码中,获取元素的一部分比较繁琐,改进之
// 获取元素
var wrapElem = document.querySelector('#calculator');
var calculatorElem = {
formerInput: wrapElem.querySelector('.formerInput'),
laterInput: wrapElem.querySelector('.laterInput'),
sign: wrapElem.querySelector('.sign'),
resultOutput: wrapElem.querySelector('.resultOutput'),
btns: wrapElem.querySelectorAll('.btn')
};
// 绑定事件
each(calculatorElem.btns, 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;
}
};
});
//下面做相应改变
获取元素
var wrapElem = document.querySelector('#calculator');
var calculatorElem = {
formerInput: wrapElem.querySelector('.formerInput'),
laterInput: wrapElem.querySelector('.laterInput'),
sign: wrapElem.querySelector('.sign'),
resultOutput: wrapElem.querySelector('.resultOutput'),
btns: wrapElem.querySelectorAll('.btn')
};
// 绑定事件
each(calculatorElem.btns, function (index, elem) {
elem.onclick = function () {
updateSign(this.value);
outputResult(operate(this.title, calculatorElem.formerInput.value, calculatorElem.laterInput.value));
};
});
// 遍历
function each(array, fn) {
for (var i = 0; i < array.length; i++) {
fn(i, array[i]);
}
}
// 更新符号
function updateSign(symbol) {
calculatorElem.sign.innerHTML = symbol;
}
// 运算
function operate(name, num1, num2) {
if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法!');
return operation[name](num1, num2);
}
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;
},
addOperation: function (name, fn) {
if (!this[name]) {
this[name] = fn;
}
return this;
}
};
operation.addOperation('mod', function (num1, num2) {
return num1 % num2;
}).addOperation('power', function (base, power) {
return Math.pow(base, power);
});
// 输出结果
function outputResult(result) {
calculatorElem.resultOutput.innerHTML = result;
}
除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://cloud.tencent.com/developer/article/1345591