使用JavaScript制作簡(jiǎn)單計(jì)算器
在日常生活中，我們經(jīng)常需要進(jìn)行計(jì)算，而計(jì)算器作為一個(gè)很好用的工具，也協(xié)助許多人完成了精確計(jì)算。今天，我們將使用JavaScript來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的計(jì)算器。
HTML部分
首先，我們需要?jiǎng)?chuàng)建一個(gè)HTML表單，其中包含輸入框和按鈕。這些輸入框用來(lái)接受用戶(hù)輸入，按鈕用來(lái)觸發(fā)計(jì)算器計(jì)算并顯示結(jié)果。
<form id="calc"> <input type="text" id="num1" placeholder="輸入第一個(gè)數(shù)字" /> <input type="text" id="num2" placeholder="輸入第二個(gè)數(shù)字" /> <br> <button type="button" onclick="calculate()">計(jì)算</button> <input type="reset" value="重置"> </form>
輸入框中，我們分別創(chuàng)建了id為num1和num2的文本輸入框，用戶(hù)可以輸入數(shù)字。按鈕被創(chuàng)建為“計(jì)算”按鈕，并在onclick事件中調(diào)用calculate()函數(shù)。最后，我們添加了一個(gè)“重置”按鈕，可以清除輸入框中的內(nèi)容。
JavaScript部分
接下來(lái)，我們需要編寫(xiě)JavaScript代碼來(lái)實(shí)際執(zhí)行計(jì)算。這個(gè)計(jì)算器將使用加法，減法，乘法和除法操作符。我們可以使用以下代碼來(lái)定義calculate()函數(shù)：
<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 = "請(qǐng)選擇操作符";
}
document.getElementById("result").innerHTML = result;
}
</script>在calculate()函數(shù)中，我們首先獲取id為num1和num2的輸入值，并將它們轉(zhuǎn)化為整數(shù)類(lèi)型。然后，我們獲取操作符的值，操作符是通過(guò)用radio按鈕來(lái)選擇的。根據(jù)操作符類(lèi)型進(jìn)行計(jì)算。最后，將計(jì)算結(jié)果顯示在HTML頁(yè)面中。
完整的HTML和JavaScript代碼
<!DOCTYPE html>
<html>
<head>
<title>JavaScript計(jì)算器</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計(jì)算器</h2>
<form id="calc">
<input type="text" id="num1" placeholder="輸入第一個(gè)數(shù)字" />
<input type="text" id="num2" placeholder="輸入第二個(gè)數(shù)字" />
<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()">計(jì)算</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 = "請(qǐng)選擇操作符";
}
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>由于網(wǎng)頁(yè)的CSS樣式不影響JavaScript代碼的執(zhí)行，所以我們可以在HTML文件中添加一些CSS樣式來(lái)設(shè)置頁(yè)面的布局和樣式。
最后，我們得到了一個(gè)完整的HTML文件，該文件包含了一個(gè)由JavaScript控制的計(jì)算器。現(xiàn)在，你可以下載并嘗試。
總結(jié)
JavaScript是一種強(qiáng)大的編程語(yǔ)言，可以用來(lái)實(shí)現(xiàn)各種功能。計(jì)算器是一項(xiàng)在日常生活中有很大用處的功能，通過(guò)使用JavaScript，我們能夠輕松地生成簡(jiǎn)單的計(jì)算器。這不僅展示了JavaScript的強(qiáng)大功能，還能幫助我們更好地理解和學(xué)習(xí)JavaScript。