Canvas 計算機
0
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#calculatorCanvas {
border: 2px solid #333;
border-radius: 10px;
margin-bottom: 20px;
}
.display {
font-size: 30px;
margin-bottom: 20px;
padding: 10px;
background-color: #eaeaea;
border-radius: 5px;
width: 100%;
text-align: right;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 80px);
grid-gap: 10px;
}
.button {
padding: 15px;
font-size: 18px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #ddd;
}
window.onload = function() {
const canvas = document.getElementById('calculatorCanvas');
const ctx = canvas.getContext('2d');
drawCanvasBackground(ctx);
};
function drawCanvasBackground(ctx) {
ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0, 0, 320, 400); // 計算機背景
ctx.fillStyle = '#333';
ctx.font = '20px Arial';
ctx.fillText('Canvas 計算機', 100, 30); // 標題
}
let displayValue = '0';
function appendToDisplay(value) {
if (displayValue === '0' && value !== '.') {
displayValue = value;
} else {
displayValue += value;
}
updateDisplay();
}
function clearDisplay() {
displayValue = '0';
updateDisplay();
}
function updateDisplay() {
document.getElementById('display').textContent = displayValue;
}
function calculate() {
try {
displayValue = eval(displayValue).toString();
} catch (e) {
displayValue = '錯誤';
}
updateDisplay();
}
留言
張貼留言