JavaScript 簡單計算器的實現
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>calculator</title> <style> div{ text-align: center; margin-top: 100px; } span{ color: red; font-size: 33px; } body{ background: url('../images/gf-style.jpeg'); } </style> </head> <body> <div> <form> <!-- 第一個數 --> <input type="text" id="num1"> <!-- 符號選項 --> <select id="options"> <option value="+" selected="selected">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> <option value="%">%</option> </select> <!--符號選項end--> <!-- 第二個數 --> <input type="text" id="num2"> = <!-- 顯示結果位置 --> <span id="result"></span> <!-- 計算按鈕 --> <button type="button" onclick="calc()">計算</button> </form> </div> <script> // 該函式獲取輸入的數 function calc(){ // 獲取下拉選單的id var options = document.getElementById("options").value; //獲取第一個數 var num1 = parseInt(document.getElementById("num1").value); // 獲取第二個數 var num2 = parseInt(document.getElementById("num2").value); // 呼叫該calculator()函式並賦值 var total = calculator(options,num1,num2); // 顯示結果 document.getElementById("result").innerText = total; } // 該函式用於計算第一個數與第二個數之間的結果 // 定義函式並傳參 function calculator(ops,n1,n2) { switch(ops){ case '+': //匹配下拉選單中的+號 return n1+n2; case '-': //匹配下拉選單中的-號 return n1-n2; case '*': //匹配下拉選單中的*號 return n1*n2; case '/': //匹配下拉選單中的/號 return n1/n2; case '%' : return n1%n2; default: return "未知操作符"; //如果都不匹配，則顯示預設值 } } </script> </body> </html>