计算器
2024-12-15 13:22:03
发布于：广东
20阅读
0回复
0点赞
AI写的
图一乐.
仿iPhone计算器（HTML格式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone Style Calculator</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
margin: 0;
font-family: 'Helvetica Neue', sans-serif;
}
.calculator {
width: 320px;
background-color: #000;
border-radius: 40px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
padding-bottom: 20px;
}
.display {
background-color: #1e1e1e;
color: white;
text-align: right;
padding: 20px;
font-size: 3em;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 10px;
}
.button {
background-color: #a9a9a9;
color: white;
border: none;
outline: none;
cursor: pointer;
font-size: 1.5em;
padding: 20px;
border-radius: 50%;
transition: background-color 0.3s;
}
.button:hover {
background-color: #8c8c8c;
}
.operator {
background-color: #ff9500;
}
.operator:hover {
background-color: #d67b00;
}
.func {
background-color: #e0e0e0;
color: black;
}
.func:hover {
background-color: #bababa;
}
.zero {
grid-column: span 2;
border-radius: 25px 0 0 25px;
}
.zero:hover {
background-color: #8c8c8c;
}
.equals {
border-radius: 0 25px 25px 0;
}
.equals:hover {
background-color: #d67b00;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="button func" onclick="clearDisplay()">AC</button>
<button class="button func" onclick="toggleSign()">±</button>
<button class="button func" onclick="calculatePercentage()">%</button>
<button class="button operator" onclick="appendOperator('÷')">÷</button>
<button class="button" onclick="appendNumber('7')">7</button>
<button class="button" onclick="appendNumber('8')">8</button>
<button class="button" onclick="appendNumber('9')">9</button>
<button class="button operator" onclick="appendOperator('×')">×</button>
<button class="button" onclick="appendNumber('4')">4</button>
<button class="button" onclick="appendNumber('5')">5</button>
<button class="button" onclick="appendNumber('6')">6</button>
<button class="button operator" onclick="appendOperator('-')">−</button>
<button class="button" onclick="appendNumber('1')">1</button>
<button class="button" onclick="appendNumber('2')">2</button>
<button class="button" onclick="appendNumber('3')">3</button>
<button class="button operator" onclick="appendOperator('+')">+</button>
<button class="button zero" onclick="appendNumber('0')">0</button>
<button class="button" onclick="appendDecimal('.')">.</button>
<button class="button equals" onclick="calculateResult()">=</button>
</div>
</div>
<script>
let currentInput = '';
let previousInput = '';
let operation = null;
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = null;
updateDisplay();
}
function toggleSign() {
if (currentInput === '') return;
currentInput = currentInput.startsWith('-') ? currentInput.slice(1) : '-' + currentInput;
updateDisplay();
}
function calculatePercentage() {
if (currentInput === '' || parseFloat(currentInput) === 0) return;
currentInput = (parseFloat(currentInput) / 100).toString();
updateDisplay();
}
function appendNumber(number) {
if (number === '.' && currentInput.includes('.')) return;
currentInput += number;
updateDisplay();
}
function appendDecimal(dot) {
if (!currentInput.includes(dot)) {
currentInput += dot;
updateDisplay();
}
}
function appendOperator(op) {
if (currentInput === '') return;
if (previousInput !== '') {
calculateResult();
}
operation = op;
previousInput = currentInput;
currentInput = '';
}
function calculateResult() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '×':
result = prev * current;
break;
case '÷':
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operation = null;
previousInput = '';
updateDisplay();
}
function updateDisplay() {
document.getElementById('display').innerText = currentInput || '0';
}
</script>
</body>
</html>
有帮助，赞一个