需要最小化 Javascript Code using operator in Calculator
[英]Need to minimize Javascript Code using operator in Calculator
問題描述
HTML、CSS 和 Javascript 計算器。 需要為操作員制作單獨的方法，通過調用 HTML 按鈕標簽 BY ONCLICK 來顯示數字並最小化代碼。 如果按下 + 運算符按鈕或 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
最小化代碼
一種解決方案是使用 JS 內置的Array.prototype.includes() function。
如果檢查以下內容，請替換所有角色：
const validCharacters = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', '-', '*', '/', '.']
if (validCharacters.contains(e.key)) {
res.value += e.key;
}
這是一個工作片段示例：
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>
需要使用 HTML/CSS 和 Javascript 從頭開始制作計算器
[英]Need to make Calculator using HTML/CSS and Javascript from Scratch
這是使用面向對象方法在 Javascript 中編寫這個小型計算器的最佳方式嗎？
[英]Is this the best way to code this small calculator in Javascript using Object Oriented approach?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.