实现简易计算器
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>简易计算器</title> <style> body{ background-color:#eee; } #calculator{ margin:100px 0 0 200px; } </style></head><body> <div id="calculator"> <p> <input type="text" class="former-input" value="1"> <span class="sign">+</span> <input type="text" class="later-input" value="1"> <span>=</span> <span class="result-output">2</span> </p> <!-- <input type="button" value="+" onclick="addHandler();"/> <input type="button" value="-" onclick="subtractHandler();"/> <input type="button" value="x" onclick="multiplyHandler();"/> <input type="button" value="÷" onclick="divideHandler();"/> --> <input class="btn" type="button" value="+" title="add" /> <input class="btn" type="button" value="-" title="subtract" /> <input class="btn" type="button" value="x" title="multiply" /> <input class="btn" type="button" value="÷" title="divide" /> </div> <script> //获取元素;querySelector()获取指定元素；querySelectorAll()获取所有元素； // var calculator = document.querySelector('#calculator'); // var formerInput = calculator.querySelector('.former-input'); // var laterInput = calculator.querySelector('.later-input'); // var sign = calculator.querySelector('.sign'); // var resultOutput = calculator.querySelector('.result-output'); // //加,输入框中的值默认为字符串，在前面加入“+”号，强制转换为数字； // function addHandler() { // sign.innerHTML = '+'; // resultOutput = +formerInput.value + +laterInput.value; // } // //减 // function subtractHandler() { // sign.innerHTML = '-'; // resultOutput = formerInput.value - laterInput.value; // } // //减 // function multiplyHandler() { // sign.innerHTML = 'x'; // resultOutput = formerInput.value * laterInput.value; // } // //减 // function divideHandler() { // sign.innerHTML = '÷'; // resultOutput = formerInput.value / laterInput.value; // } //第一次改进 // var calculator = document.querySelector('#calculator'); // var formerInput = calculator.querySelector('.former-input'); // var laterInput = calculator.querySelector('.later-input'); // var sign = calculator.querySelector('.sign'); // var resultOutput = calculator.querySelector('.result-output'); // 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 = +formerInput.value + +laterInput.value; // } // //减 // function subtractHandler() { // sign.innerHTML = '-'; // resultOutput = formerInput.value - laterInput.value; // } // //减 // function multiplyHandler() { // sign.innerHTML = 'x'; // resultOutput = formerInput.value * laterInput.value; // } // //减 // function divideHandler() { // sign.innerHTML = '÷'; // resultOutput = formerInput.value / laterInput.value; // } //第二次改写 // var calculator = document.querySelector('#calculator'); // var formerInput = calculator.querySelector('.former-input'); // var laterInput = calculator.querySelector('.later-input'); // var sign = calculator.querySelector('.sign'); // var resultOutput = calculator.querySelector('.result-output'); // var btns = calculator.querySelectorAll('.btn'); // //绑定事件 // 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; // } // }; // } // // btns[0].onclick = addHandler; // // btns[1].onclick = subtractHandler; // // btns[2].onclick = multiplyHandler; // // btns[3].onclick = divideHandler; // function addHandler() { // sign.innerHTML = '+'; // resultOutput = +formerInput.value + +laterInput.value; // } // //减 // function subtractHandler() { // sign.innerHTML = '-'; // resultOutput = formerInput.value - laterInput.value; // } // //减 // function multiplyHandler() { // sign.innerHTML = 'x'; // resultOutput = formerInput.value * laterInput.value; // } // //减 // function divideHandler() { // sign.innerHTML = '÷'; // resultOutput = formerInput.value / laterInput.value; // } //第三次修改--提取元素 var calculator = document.querySelector('#calculator'); var formerInput = calculator.querySelector('.former-input'); var laterInput = calculator.querySelector('.later-input'); var sign = calculator.querySelector('.sign'); var resultOutput = calculator.querySelector('.result-output'); var btns = calculator.querySelectorAll('.btn'); //回调函数 each(btns,function(index,elem){ 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; } }; } }) //绑定事件 //遍历 function each(array,fn){ for(var i = 0;i<array.length;i++){ fn(i,array[i]); } } //更新符号 function updateSign(symbol) { sign.innerHTML = symbol; } function addHandler() { updateSign('+'); resultOutput.innerHTML = add(+formerInput.value + +laterInput.value); } //减 function subtractHandler() { updateSign('-'); resultOutput.innerHTML = subtract(formerInput.value - laterInput.value); } //减 function multiplyHandler() { updateSign('*'); resultOutput.innerHTML = multiply(formerInput.value * laterInput.value); } //减 function divideHandler() { updateSign('/');; resultOutput.innerHTML = divide(formerInput.value / laterInput.value); } </script></body></html> 
