如果你對html的基礎知識已經有了了解,那么下面的代碼讓你能夠輕松實現一個簡單的計算器。
<!DOCTYPE html> <html> <head> <title>簡單計算器</title> </head> <body> <h1>簡單計算器</h1> <form> <label>請輸入第一個數字:</label> <input type="text" id="num1"><br> <label>請輸入第二個數字:</label> <input type="text" id="num2"><br> <label>請選擇運算符:</label> <select id="operator"> <option value="addition">+</option> <option value="subtraction">-</option> <option value="multiplication">*</option> <option value="division">/</option> </select><br> <button type="button" onclick="calculate()">計算</button><br> <label>計算結果為:</label> <input type="text" id="result"> </form> <script> function calculate() { var num1 = parseFloat(document.getElementById("num1").value); var num2 = parseFloat(document.getElementById("num2").value); var operator = document.getElementById("operator").value; var result; switch(operator) { case "addition": result = num1 + num2; break; case "subtraction": result = num1 - num2; break; case "multiplication": result = num1 * num2; break; case "division": result = num1 / num2; break; } document.getElementById("result").value = result; } </script> </body> </html>
以上就是使用html實現一個簡單計算器的代碼,通過input輸入數字、select選擇計算符、按鈕觸發函數來實現。