使用JavaScript制作簡單計算器
在日常生活中，我們經常需要進行計算，而計算器作為一個很好用的工具，也協助許多人完成了精確計算。今天，我們將使用JavaScript來創(chuàng)建一個簡單的計算器。
HTML部分
首先，我們需要創(chuàng)建一個HTML表單，其中包含輸入框和按鈕。這些輸入框用來接受用戶輸入，按鈕用來觸發(fā)計算器計算并顯示結果。
<form id="calc"> <input type="text" id="num1" placeholder="輸入第一個數字" /> <input type="text" id="num2" placeholder="輸入第二個數字" /> <br> <button type="button" onclick="calculate()">計算</button> <input type="reset" value="重置"> </form>
輸入框中，我們分別創(chuàng)建了id為num1和num2的文本輸入框，用戶可以輸入數字。按鈕被創(chuàng)建為“計算”按鈕，并在onclick事件中調用calculate()函數。最后，我們添加了一個“重置”按鈕，可以清除輸入框中的內容。
JavaScript部分
接下來，我們需要編寫JavaScript代碼來實際執(zhí)行計算。這個計算器將使用加法，減法，乘法和除法操作符。我們可以使用以下代碼來定義calculate()函數：
<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var operator = document.querySelector('input[name="operator"]:checked').value;
var result;
if (operator === '+') {
result = num1 + num2;
} else if (operator === '-') {
result = num1 - num2;
} else if (operator === '*') {
result = num1 * num2;
} else if (operator === '/') {
result = num1 / num2;
} else {
result = "請選擇操作符";
}
document.getElementById("result").innerHTML = result;
}
</script>在calculate()函數中，我們首先獲取id為num1和num2的輸入值，并將它們轉化為整數類型。然后，我們獲取操作符的值，操作符是通過用radio按鈕來選擇的。根據操作符類型進行計算。最后，將計算結果顯示在HTML頁面中。
完整的HTML和JavaScript代碼
<!DOCTYPE html>
<html>
<head>
<title>JavaScript計算器</title>
<style>
form {
margin: 50px auto;
width: 400px;
border: 2px solid #ccc;
padding: 20px;
text-align: center;
}
input {
margin: 10px;
padding: 5px 10px;
font-size: 16px;
width: 150px;
}
button {
padding: 5px 10px;
color: #fff;
background-color: #3498db;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
margin: 10px;
}
#result {
margin: 30px auto;
width: 150px;
font-size: 24px;
}
</style>
</head>
<body>
<h2>JavaScript計算器</h2>
<form id="calc">
<input type="text" id="num1" placeholder="輸入第一個數字" />
<input type="text" id="num2" placeholder="輸入第二個數字" />
<br>
<label for="add">+</label>
<input type="radio" name="operator" id="add" value="+" checked />
<label for="minus">-</label>
<input type="radio" name="operator" id="minus" value="-" />
<label for="times">*</label>
<input type="radio" name="operator" id="times" value="*" />
<label for="divide">/</label>
<input type="radio" name="operator" id="divide" value="/" />
<br>
<button type="button" onclick="calculate()">計算</button>
<input type="reset" value="重置">
<div id="result"></div>
</form>
<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var operator = document.querySelector('input[name="operator"]:checked').value;
var result;
if (operator === '+') {
result = num1 + num2;
} else if (operator === '-') {
result = num1 - num2;
} else if (operator === '*') {
result = num1 * num2;
} else if (operator === '/') {
result = num1 / num2;
} else {
result = "請選擇操作符";
}
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>由于網頁的CSS樣式不影響JavaScript代碼的執(zhí)行，所以我們可以在HTML文件中添加一些CSS樣式來設置頁面的布局和樣式。
最后，我們得到了一個完整的HTML文件，該文件包含了一個由JavaScript控制的計算器。現在，你可以下載并嘗試。
總結
JavaScript是一種強大的編程語言，可以用來實現各種功能。計算器是一項在日常生活中有很大用處的功能，通過使用JavaScript，我們能夠輕松地生成簡單的計算器。這不僅展示了JavaScript的強大功能，還能幫助我們更好地理解和學習JavaScript。