資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用HTML、CSS和JavaScript建立計算器
要使用HTML、CSS和Javascript建立一個計算器，我們需要對HTML、CSS和JavaScript的工作原理有基本的瞭解。計算器是一個簡單的工具，它執行基本的算術計算，例如加法、減法、乘法和除法。在本文中，我們將討論如何使用HTML、CSS和JavaScript來建立一個計算器。通常，如果我們觀察任何即時的計算器，我們知道它有
- 一個數字網格（0-9和00）。
- 基本的算術運算子（+、-、/、x、%）。
- 一些用於特殊運算的符號，例如（清除、退格和等於）
我們即時計算器的輸出將如下所示
HTML的使用
在本文中，為了建立一個計算器，我們使用HTML來建立基本結構。使用HTML，我們建立了一個輸入欄位、顯示區域和按鈕。
CSS的使用
我們使用CSS來設計使用HTML建立的計算器的基本結構，使其更易於使用者使用，並使其看起來更好。CSS有助於以有組織的方式定位和排列按鈕、顯示區域和輸入欄位，並負責字型、顏色、背景顏色、填充、邊距等。
JavaScript的使用
在本文中，為了建立計算器，我們使用了JavaScript來為每個按鈕新增功能，並對使用者輸入做出響應。我們使用Javascript添加了點選事件和鍵盤輸入，以便每個元件都能執行其各自的功能。
使用HTML、CSS和JS建立計算器
下面是我們用來建立計算器的HTML、CSS和JavaScript的完整示例程式碼。它提供了它們正在執行的功能的分步解釋。
HTML程式碼
這是我們計算器的HTML檔案。在這裡，我們使用HTML來建立計算器UI的內容。我們包括計算器的按鈕、輸入欄位和顯示區域。
在HTML程式碼中，我們使用了**onclick**事件，這意味著每當使用者點選任何按鈕時，相應的操作就會在使用javascript的計算器後端執行。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calc">
<div id="content">
<form>
<div id="output">
<input type="text" id='res'>
</div>
<div class="btn">
<input type="button" value='C' onclick="Clear()" id="clear">
<input type="button" value='←' onclick="Back()" id="backspace">
<input type="button" value='%' onclick="Solve('%')">
<input type="button" value='/' onclick="Solve('/')">
<br>
<input type="button" value='7' onclick="Solve('7')">
<input type="button" value='8' onclick="Solve('8')">
<input type="button" value='9' onclick="Solve('9')">
<input type="button" value='x' onclick="Solve('*')">
<br>
<input type="button" value='4' onclick="Solve('4')">
<input type="button" value='5' onclick="Solve('5')">
<input type="button" value='6' onclick="Solve('6')">
<input type="button" value='-' onclick="Solve('-')">
<br>
<input type="button" value='1' onclick="Solve('1')">
<input type="button" value='2' onclick="Solve('2')">
<input type="button" value='3' onclick="Solve('3')">
<input type="button" value='+' onclick="Solve('+')">
<br>
<input type="button" value='00' onclick="Solve('00')">
<input type="button" value='0' onclick="Solve('0')">
<input type="button" value='.' onclick="Solve('.')">
<input type="button" value='=' onclick="Result()">
</div>
</form>
</div>
</div>
<script src='index.js'></script>
</body>
</html>
CSS程式碼
這是實現我們計算器的CSS的**style.css**檔案，它連結到HTML程式碼。透過這段CSS程式碼，我們使用flex將計算器放置在頁面中心，為計算器提供了深色主題背景，為“c”和“←”按鈕添加了不同的顏色，並調整了顯示輸入框的大小，並更改了元素的字型大小和填充。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#calc {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#content {
background: #2c302c;
padding: 20px;
border-radius: 10px;
}
#content form input {
border: 0;
outline: 0;
width: 50px;
height: 50px;
border-radius: 8px;
font-size: 15px;
margin: 10px;
cursor: pointer;
}
#backspace {
background-color: rgb(237, 89, 30);
color: white;
}
#res {
padding: 10px;
}
#clear {
background-color: rgb(237, 89, 30);
color: white;
}
form #output {
display: flex;
justify-content: flex-end;
margin: 15px 0;
}
form #output input {
text-align: right;
flex: 1;
font-size: 25px;
}
JavaScript程式碼
這是實現我們計算器的Javascript的**index.js**檔案，它連結到HTML程式碼。此程式碼具有主要功能，例如：使用**solve**函式追加值，使用**result**函式計算結果（使用“eval”計算結果），如果算術表示式中存在任何錯誤，則顯示錯誤訊息，使用**clear**函式清除顯示，使用**back**函式刪除數字，最後，我們使用addEventListener添加了鍵盤功能。
以下是使用javascript實現上述功能。
function Solve(val) {
var v = document.getElementById('res');
v.value += val;
}
function Result() {
var num1 = document.getElementById('res').value;
try {
var num2 = eval(num1.replace('x', '*'));
document.getElementById('res').value = num2;
} catch {
document.getElementById('res').value = 'Error';
}
}
function Clear() {
var inp = document.getElementById('res');
inp.value = '';
}
function Back() {
var ev = document.getElementById('res');
ev.value = ev.value.slice(0, -1);
}
document.addEventListener('keydown', function (event) {
const key = event.key;
const validKeys = '0123456789+-*/.%';
if (validKeys.includes(key)) {
Solve(key === '*' ? 'x' : key);
} else if (key === 'Enter') {
Result();
} else if (key === 'Backspace') {
Back();
} else if (key.toLowerCase() === 'c') {
Clear();
}
});
68K+ 次瀏覽
