CSS可以用來實現簡單計算器。以下是如何使用CSS來實現計算器：

HTML代碼:
<div class="calculator">
<div class="screen">
<p class="result">0</p>
</div>
<div class="buttons">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">+</button>
<br/>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
<br/>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">*</button>
<br/>
<button class="number">0</button>
<button class="operator">.</button>
<button class="equals">=</button>
<button class="operator">/</button>
<br/>
<button class="clear">C</button>
</div>
</div>
CSS代碼:
.calculator {
width: 200px;
border: 2px solid black;
border-radius: 5px;
font-size: 16px;
}
.screen {
height: 40px;
background-color: lightgrey;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 5px;
}
.result {
margin: 0;
}
.buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5px;
}
button {
width: 40px;
height: 40px;
background-color: white;
border: none;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
}
.operator {
background-color: lightgrey;
}
.equals {
background-color: green;
color: white;
}
.clear {
background-color: red;
color: white;
}
JavaScript代碼:
const numbers = document.querySelectorAll('.number');
const operators = document.querySelectorAll('.operator');
const clear = document.querySelector('.clear');
const equals = document.querySelector('.equals');
const result = document.querySelector('.result');
let currentValue = 0;
let operator = '+';
numbers.forEach((number) =>{
number.addEventListener('click', () =>{
currentValue = currentValue * 10 + parseInt(number.innerText);
result.innerText = currentValue;
});
});
operators.forEach((op) =>{
op.addEventListener('click', () =>{
calculate();
operator = op.innerText;
});
});
equals.addEventListener('click', () =>{
calculate();
});
clear.addEventListener('click', () =>{
currentValue = 0;
operator = '+';
result.innerText = currentValue;
});
function calculate() {
switch (operator) {
case '+':
currentValue = currentValue;
break;
case '-':
currentValue = -currentValue;
break;
case '*':
currentValue = currentValue * currentValue;
break;
case '/':
currentValue = 1 / currentValue;
break;
}
result.innerText = currentValue;
currentValue = 0;
}