使用HTML和JavaScript實現(xiàn)一個簡單的計算器。
一、繪制鍵盤
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
padding: 10px;
}
.calculator button {
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<h1>Simple Calculator</h1>
<div class="calculator">
<button onclick="clearDisplay()">C</button>
<button onclick="deleteLastCharacter()">←</button>
<button onclick="appendCharacter('/')">/</button>
<button onclick="appendCharacter('7')">7</button>
<button onclick="appendCharacter('8')">8</button>
<button onclick="appendCharacter('9')">9</button>
<button onclick="appendCharacter('*')">*</button>
<button onclick="appendCharacter('4')">4</button>
<button onclick="appendCharacter('5')">5</button>
<button onclick="appendCharacter('6')">6</button>
<button onclick="appendCharacter('-')">-</button>
<button onclick="appendCharacter('1')">1</button>
<button onclick="appendCharacter('2')">2</button>
<button onclick="appendCharacter('3')">3</button>
<button onclick="appendCharacter('+')">+</button>
<button onclick="appendCharacter('0')">0</button>
<button onclick="appendCharacter('.')">.</button>
<button onclick="calculateResult()">=</button>
</div>
<script>
var display = "";
function appendCharacter(character) {
display += character;
updateDisplay();
}
function deleteLastCharacter() {
display = display.slice(0, -1);
updateDisplay();
}
function clearDisplay() {
display = "";
updateDisplay();
}
function calculateResult() {
var result;
try {
result = eval(display);
} catch (error) {
result = "Error";
}
display = result.toString();
updateDisplay();
}
function updateDisplay() {
var displayElement = document.getElementById("display");
displayElement.textContent = display;
}
</script>
</body>
</html>
這段代碼會在瀏覽器中創(chuàng)建一個標題為"Simple Calculator"的頁面。頁面頂部有一個 <h1> 元素，用于顯示標題。計算器界面使用了CSS網(wǎng)格布局，將按鈕排列為4列。
在JavaScript部分，定義了一些函數(shù)來處理計算器的操作。appendCharacter() 函數(shù)用于將字符添加到顯示屏上；deleteLastCharacter() 函數(shù)用于刪除最后一個字符；clearDisplay() 函數(shù)用于清空顯示屏；calculateResult() 函數(shù)用于計算結(jié)果，并將結(jié)果顯示在顯示屏上；updateDisplay() 函數(shù)用于更新顯示屏的內(nèi)容。
二、完整代碼
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
padding: 10px;
}
.calculator button {
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<h1>Simple Calculator</h1>
<div class="calculator">
<input type="text" id="display" readonly>
<button onclick="appendCharacter('7')">7</button>
<button onclick="appendCharacter('8')">8</button>
<button onclick="appendCharacter('9')">9</button>
<button onclick="appendCharacter('/')">/</button>
<button onclick="appendCharacter('4')">4</button>
<button onclick="appendCharacter('5')">5</button>
<button onclick="appendCharacter('6')">6</button>
<button onclick="appendCharacter('*')">*</button>
<button onclick="appendCharacter('1')">1</button>
<button onclick="appendCharacter('2')">2</button>
<button onclick="appendCharacter('3')">3</button>
<button onclick="appendCharacter('-')">-</button>
<button onclick="appendCharacter('0')">0</button>
<button onclick="appendCharacter('.')">.</button>
<button onclick="appendCharacter('+')">+</button>
<button onclick="deleteLastCharacter()">←</button>
<button onclick="clearDisplay()">C</button>
<button onclick="calculateResult()">=</button>
</div>
<script>
var display = "";
function appendCharacter(character) {
display += character;
updateDisplay();
}
function deleteLastCharacter() {
display = display.slice(0, -1);
updateDisplay();
}
function clearDisplay() {
display = "";
updateDisplay();
}
function calculateResult() {
var result;
try {
result = eval(display);
} catch (error) {
result = "Error";
}
display = result.toString();
updateDisplay();
}
function updateDisplay() {
var displayElement = document.getElementById("display");
displayElement.value = display;
}
</script>
</body>
</html>
代碼在 <div class="calculator"> 中添加了一個 <input> 元素，用于顯示計算器的輸入和結(jié)果。這個 <input> 元素使用 readonly 屬性，以防止直接編輯。文章來源：http://www.zghlxwxcb.cn/news/detail-649688.html
以上代碼可以在瀏覽器中運行，可以通過點擊按鈕來輸入數(shù)字和運算符。顯示屏?xí)崟r更新，能夠計算結(jié)果。文章來源地址http://www.zghlxwxcb.cn/news/detail-649688.html
到了這里，關(guān)于HTML和JavaScript實現(xiàn)一個簡單的計算器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
