需要最小化 Javascript Code using operator in Calculator
[英]Need to minimize Javascript Code using operator in Calculator
问题描述
HTML, CSS and Javascript calculator. 
HTML、CSS 和 Javascript 计算器。 Need to make separate methods for operators, display digits by calling through HTML button tags BY ONCLICK and to minimize code.需要为操作员制作单独的方法，通过调用 HTML 按钮标签 BY ONCLICK 来显示数字并最小化代码。 In case if there is + operator button pressed or presseddigit() function if digit button pressed replacing the livescreen() function. Code section below:如果按下 + 运算符按钮或 presseddigit() function 如果按下数字按钮替换 livescreen() function。下面的代码部分：
document.addEventListener("keydown", keyboardInputHandler); function keyboardInputHandler(e) { //grabbing the liveScreen let res = document.getElementById("result"); //numbers if (e.key === "0") { res.value += "0"; } else if (e.key === "1") { res.value += "1"; } else if (e.key === "2") { res.value += "2"; } else if (e.key === "3") { res.value += "3"; } else if (e.key === "4") { res.value += "4"; } else if (e.key === "5") { res.value += "5"; } else if (e.key === "6") { res.value += "6"; } else if (e.key === "7") { res.value += "7"; } else if (e.key === "7") { res.value += "7"; } else if (e.key === "8") { res.value += "8"; } else if (e.key === "9") { res.value += "9"; } //operators // if (e.key === "+") { // res.value += "+"; // } else if (e.key === "-") { // res.value += "-"; // } else if (e.key === "*") { // res.value += "*"; // } else if (e.key === "/") { // res.value += "/"; // } if (e.key === "+") { res.value += "+"; } else if (e.key === "-") { res.value += "-"; } else if (e.key === "*") { res.value += "*"; } else if (e.key === "/") { res.value += "/"; } // Handling decimal key if (e.key === ".") { res.value += "."; } } // Show equal Result function showequalresult() { result.value = eval(result.value); } // Clears the screen on click of C button. function clearScreen() { document.getElementById("result").value = ""; } // Displays entered value on screen. function liveScreen(value) { let res = document.getElementById("result"); res.value += value; }
body { font-family: 'Open Sans', sans-serif; background-color: black; } #container { width: 1000px; height: 550px; background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png); margin: 20px auto; } #calculator { width: 320px; height: 520px; background-color: #eaedef; margin: 0 auto; top: 20px; position: relative; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #result { height: 120px; margin-bottom: 20px; } #history { text-align: right; height: 20px; margin: 0 20px; padding-top: 20px; font-size: 15px; color: #919191; } #result { text-align: right; height: 60px; width: 290px; margin: 10px 20px; font-size: 30px; background-color: #afbec4; } #keyboard { height: 400px; }.operator, .number, .empty { width: 67px; height: 50px; margin: 6px; float: left; border-width: 0; font-weight: bold; font-size: 15px; } #clear { background-color: #cb4e4d; border-radius: 45%; }.number, .empty { background-color: #5f7d8c; border-radius: 10px; color: white; }.number, .operator { cursor: pointer; background-color: #5f7d8c; border-radius: 10px; color: white; }.operator:active, .number:active { font-size: 13px; }.operator:focus, .number:focus, .empty:focus { outline: 0; } button:nth-child(4) { font-size: 9px; background-color: #cb4e4d; border-radius: 10px; } button:nth-child(8) { font-size: 20px; background-color: #ffa500; border-radius: 10px; } button:nth-child(12) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(16) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(20) { font-size: 20px; background-color: #fda629; border-radius: 10px; }
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet"> <title>A simple calculator</title> <script src="script.js"></script> </head> <body> <div id="container"> <div id="calculator"> <div id="resultss"> <div id="results"> <input type="text" name="result" class="result" id="result" value="" placeholder="0" /> </div> </div> <div id="keyboard"> <button class="operator" onclick="clearScreen()" id="clear">C</button> <button class="operator" onclick="liveScreen('+-')" id="backspace">+-</button> <button class="operator" onclick="liveScreen('%')" id="%">%</button> <button class="operator" onclick="liveScreen('/')" id="/">Console <br>Log</button> <button class="number" onclick="liveScreen(7)" id="7">7</button> <button class="number" onclick="liveScreen(8)" id="8">8</button> <button class="number" onclick="liveScreen(9)" id="9">9</button> <button class="operator" onclick="liveScreen('/')" id="/">÷</button> <button class="number" onclick="liveScreen(4)" id="4">4</button> <button class="number" onclick="liveScreen(5)" id="5">5</button> <button class="number" onclick="liveScreen(6)" id="6">6</button> <button class="operator" onclick="liveScreen('*')" id="-">×</button> <button class="number" onclick="liveScreen(1)" id="1">1</button> <button class="number" onclick="liveScreen(2)" id="2">2</button> <button class="number" onclick="liveScreen(3)" id="3">3</button> <button class="operator" onclick="liveScreen('-')" id="-">-</button> <button class="empty" onclick="liveScreen(0)" id="0">0</button> <button class="number" onclick="liveScreen('.')" id="0">.</button> <button class="empty" onclick="showequalresult()" id="=">=</button> <button class="operator" onclick="liveScreen('+')" id="+">+</button> </div> </div> </div> </body> </html>
2 个解决方案
解决方案1
0 2022-03-03 10:35:09
Minimise code
One solution is to use the Array.prototype.includes() function built into JS.一种解决方案是使用 JS 内置的Array.prototype.includes() function。
Replace all of your character if checks with the following:如果检查以下内容，请替换所有角色：
const validCharacters = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', '-', '*', '/', '.']
if (validCharacters.contains(e.key)) {
res.value += e.key;
}
Here is a working snippet example:这是一个工作片段示例：
document.addEventListener("keydown", keyboardInputHandler); function keyboardInputHandler(e) { //grabbing the liveScreen let res = document.getElementById("result"); //numbers const validCharacters = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', '-', '*', '/', '.'] if (validCharacters.contains(e.key)) { res.value += e.key; } } // Show equal Result function showequalresult() { result.value = eval(result.value); } // Clears the screen on click of C button. function clearScreen() { document.getElementById("result").value = ""; } // Displays entered value on screen. function liveScreen(value) { let res = document.getElementById("result"); res.value += value; }
body { font-family: 'Open Sans', sans-serif; background-color: black; } #container { width: 1000px; height: 550px; background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png); margin: 20px auto; } #calculator { width: 320px; height: 520px; background-color: #eaedef; margin: 0 auto; top: 20px; position: relative; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #result { height: 120px; margin-bottom: 20px; } #history { text-align: right; height: 20px; margin: 0 20px; padding-top: 20px; font-size: 15px; color: #919191; } #result { text-align: right; height: 60px; width: 290px; margin: 10px 20px; font-size: 30px; background-color: #afbec4; } #keyboard { height: 400px; }.operator, .number, .empty { width: 67px; height: 50px; margin: 6px; float: left; border-width: 0; font-weight: bold; font-size: 15px; } #clear { background-color: #cb4e4d; border-radius: 45%; }.number, .empty { background-color: #5f7d8c; border-radius: 10px; color: white; }.number, .operator { cursor: pointer; background-color: #5f7d8c; border-radius: 10px; color: white; }.operator:active, .number:active { font-size: 13px; }.operator:focus, .number:focus, .empty:focus { outline: 0; } button:nth-child(4) { font-size: 9px; background-color: #cb4e4d; border-radius: 10px; } button:nth-child(8) { font-size: 20px; background-color: #ffa500; border-radius: 10px; } button:nth-child(12) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(16) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(20) { font-size: 20px; background-color: #fda629; border-radius: 10px; }
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet"> <title>A simple calculator</title> <script src="script.js"></script> </head> <body> <div id="container"> <div id="calculator"> <div id="resultss"> <div id="results"> <input type="text" name="result" class="result" id="result" value="" placeholder="0" /> </div> </div> <div id="keyboard"> <button class="operator" onclick="clearScreen()" id="clear">C</button> <button class="operator" onclick="liveScreen('+-')" id="backspace">+-</button> <button class="operator" onclick="liveScreen('%')" id="%">%</button> <button class="operator" onclick="liveScreen('/')" id="/">Console <br>Log</button> <button class="number" onclick="liveScreen(7)" id="7">7</button> <button class="number" onclick="liveScreen(8)" id="8">8</button> <button class="number" onclick="liveScreen(9)" id="9">9</button> <button class="operator" onclick="liveScreen('/')" id="/">÷</button> <button class="number" onclick="liveScreen(4)" id="4">4</button> <button class="number" onclick="liveScreen(5)" id="5">5</button> <button class="number" onclick="liveScreen(6)" id="6">6</button> <button class="operator" onclick="liveScreen('*')" id="-">×</button> <button class="number" onclick="liveScreen(1)" id="1">1</button> <button class="number" onclick="liveScreen(2)" id="2">2</button> <button class="number" onclick="liveScreen(3)" id="3">3</button> <button class="operator" onclick="liveScreen('-')" id="-">-</button> <button class="empty" onclick="liveScreen(0)" id="0">0</button> <button class="number" onclick="liveScreen('.')" id="0">.</button> <button class="empty" onclick="showequalresult()" id="=">=</button> <button class="operator" onclick="liveScreen('+')" id="+">+</button> </div> </div> </div> </body> </html>
解决方案2
-1 2022-03-03 10:49:35
document.addEventListener("keydown", function(e) { e.preventDefault(); return keyboardInput(e.key); }); const allowedKeys = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '+', '-', '/', '*', ]; const screen = document.getElementById("result"); function keyboardInput(key) { if (allowedKeys.includes(key) || allowedKeys.includes(key.toString())) { screen.value += key.toString(); } if (key === '=') { showequalresult(); } return false; } // Show equal Result function showequalresult() { screen.value = eval(screen.value); } // Clears the screen on click of C button. function clearScreen() { screen.value = ""; } // Displays entered value on screen. function liveScreen(value) { keyboardInput(value); }
body { font-family: 'Open Sans', sans-serif; background-color: black; } #container { width: 1000px; height: 550px; background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png); margin: 20px auto; } #calculator { width: 320px; height: 520px; background-color: #eaedef; margin: 0 auto; top: 20px; position: relative; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #result { height: 120px; margin-bottom: 20px; } #history { text-align: right; height: 20px; margin: 0 20px; padding-top: 20px; font-size: 15px; color: #919191; } #result { text-align: right; height: 60px; width: 290px; margin: 10px 20px; font-size: 30px; background-color: #afbec4; } #keyboard { height: 400px; }.operator, .number, .empty { width: 67px; height: 50px; margin: 6px; float: left; border-width: 0; font-weight: bold; font-size: 15px; } #clear { background-color: #cb4e4d; border-radius: 45%; }.number, .empty { background-color: #5f7d8c; border-radius: 10px; color: white; }.number, .operator { cursor: pointer; background-color: #5f7d8c; border-radius: 10px; color: white; }.operator:active, .number:active { font-size: 13px; }.operator:focus, .number:focus, .empty:focus { outline: 0; } button:nth-child(4) { font-size: 9px; background-color: #cb4e4d; border-radius: 10px; } button:nth-child(8) { font-size: 20px; background-color: #ffa500; border-radius: 10px; } button:nth-child(12) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(16) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(20) { font-size: 20px; background-color: #fda629; border-radius: 10px; }
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet"> <title>A simple calculator</title> <script src="script.js"></script> </head> <body> <div id="container"> <div id="calculator"> <div id="resultss"> <div id="results"> <input type="text" name="result" class="result" id="result" value="" placeholder="0" /> </div> </div> <div id="keyboard"> <button class="operator" onclick="clearScreen()" id="clear">C</button> <button class="operator" onclick="liveScreen('+-')" id="backspace">+-</button> <button class="operator" onclick="liveScreen('%')" id="%">%</button> <button class="operator" onclick="liveScreen('/')" id="/">Console <br>Log</button> <button class="number" onclick="liveScreen(7)" id="7">7</button> <button class="number" onclick="liveScreen(8)" id="8">8</button> <button class="number" onclick="liveScreen(9)" id="9">9</button> <button class="operator" onclick="liveScreen('/')" id="/">÷</button> <button class="number" onclick="liveScreen(4)" id="4">4</button> <button class="number" onclick="liveScreen(5)" id="5">5</button> <button class="number" onclick="liveScreen(6)" id="6">6</button> <button class="operator" onclick="liveScreen('*')" id="-">×</button> <button class="number" onclick="liveScreen(1)" id="1">1</button> <button class="number" onclick="liveScreen(2)" id="2">2</button> <button class="number" onclick="liveScreen(3)" id="3">3</button> <button class="operator" onclick="liveScreen('-')" id="-">-</button> <button class="empty" onclick="liveScreen(0)" id="0">0</button> <button class="number" onclick="liveScreen('.')" id="0">.</button> <button class="empty" onclick="showequalresult()" id="=">=</button> <button class="operator" onclick="liveScreen('+')" id="+">+</button> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用JavaScript代码的计算器 - calculator using javascript code
最小化JavaScript代码 - Minimize javascript code
需要使用 HTML/CSS 和 Javascript 从头开始制作计算器 - Need to make Calculator using HTML/CSS and Javascript from Scratch
尝试用JavaScript编码计算器 - Trying to code a calculator in JavaScript
如何最小化DatePicker中的JavaScript代码 - How to Minimize the Code of JavaScript In DatePicker
这是使用面向对象方法在 Javascript 中编写这个小型计算器的最佳方式吗？ - Is this the best way to code this small calculator in Javascript using Object Oriented approach?
使用JavaScript的计算器除法 - Calculator division using javascript
使用 JavaScript 在计算器上退格 - Backspace on calculator using JavaScript
使用javascript的百分比计算器 - Percentage Calculator using javascript
使用JavaScript的服装计算器 - Clothing calculator using javascript
相关标签