Skip to content

Commit 56d774d

Browse files
luhuadongluhuadong
committed
add iPhone style calculator
1 parent c3ee6ea commit 56d774d

File tree

3 files changed

+184
-0
lines changed

3 files changed

+184
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
# calculator
2+
23
一个网页实现的计算器小工具

‎index.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>iPhone Style Calculator</title>
7+
<style>
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
background-color: #f7f7f7;
14+
margin: 0;
15+
}
16+
17+
.calculator {
18+
width: 320px;
19+
height: 520px;
20+
background-color: #000;
21+
border-radius: 25px;
22+
padding: 20px;
23+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
24+
}
25+
26+
.display {
27+
width: 100%;
28+
height: 80px;
29+
background-color: #333;
30+
color: white;
31+
font-size: 2.5em;
32+
text-align: right;
33+
padding: 20px;
34+
box-sizing: border-box;
35+
border-radius: 15px;
36+
margin-bottom: 20px;
37+
}
38+
39+
.button {
40+
width: 60px;
41+
height: 60px;
42+
margin: 10px;
43+
border: none;
44+
border-radius: 50%;
45+
font-size: 1.5em;
46+
color: white;
47+
transition: background-color 0.2s;
48+
}
49+
50+
.button:active {
51+
background-color: #555;
52+
}
53+
54+
.button.orange {
55+
background-color: #f79e1b;
56+
}
57+
58+
.button.gray {
59+
background-color: #a5a5a5;
60+
}
61+
62+
.button.dark-gray {
63+
background-color: #333;
64+
}
65+
66+
.row {
67+
display: flex;
68+
justify-content: space-between;
69+
}
70+
</style>
71+
</head>
72+
<body>
73+
<div class="calculator">
74+
<div class="display" id="display">0</div>
75+
<div class="row">
76+
<button class="button gray" onclick="clearDisplay()">AC</button>
77+
<button class="button gray" onclick="inputOperator('+/-')">+/-</button>
78+
<button class="button gray" onclick="inputOperator('%')">%</button>
79+
<button class="button orange" onclick="inputOperator('/')">÷</button>
80+
</div>
81+
<div class="row">
82+
<button class="button dark-gray" onclick="inputDigit(7)">7</button>
83+
<button class="button dark-gray" onclick="inputDigit(8)">8</button>
84+
<button class="button dark-gray" onclick="inputDigit(9)">9</button>
85+
<button class="button orange" onclick="inputOperator('*')">×</button>
86+
</div>
87+
<div class="row">
88+
<button class="button dark-gray" onclick="inputDigit(4)">4</button>
89+
<button class="button dark-gray" onclick="inputDigit(5)">5</button>
90+
<button class="button dark-gray" onclick="inputDigit(6)">6</button>
91+
<button class="button orange" onclick="inputOperator('-')">-</button>
92+
</div>
93+
<div class="row">
94+
<button class="button dark-gray" onclick="inputDigit(1)">1</button>
95+
<button class="button dark-gray" onclick="inputDigit(2)">2</button>
96+
<button class="button dark-gray" onclick="inputDigit(3)">3</button>
97+
<button class="button orange" onclick="inputOperator('+')">+</button>
98+
</div>
99+
<div class="row">
100+
<button class="button dark-gray" style="flex: 2;" onclick="inputDigit(0)">0</button>
101+
<button class="button dark-gray" onclick="inputDecimal()">.</button>
102+
<button class="button orange" onclick="calculate()">=</button>
103+
</div>
104+
</div>
105+
<script src="script.js"></script>
106+
</body>
107+
</html>

‎script.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
let displayValue = '0';
2+
let firstOperand = null;
3+
let waitingForSecondOperand = false;
4+
let operator = null;
5+
6+
function updateDisplay() {
7+
const display = document.getElementById('display');
8+
display.innerText = displayValue;
9+
}
10+
11+
function clearDisplay() {
12+
displayValue = '0';
13+
firstOperand = null;
14+
waitingForSecondOperand = false;
15+
operator = null;
16+
updateDisplay();
17+
}
18+
19+
function inputDigit(digit) {
20+
if (waitingForSecondOperand === true) {
21+
displayValue = digit;
22+
waitingForSecondOperand = false;
23+
} else {
24+
displayValue = displayValue === '0' ? digit : displayValue + digit;
25+
}
26+
updateDisplay();
27+
}
28+
29+
function inputDecimal() {
30+
if (waitingForSecondOperand === true) {
31+
displayValue = '0.';
32+
waitingForSecondOperand = false;
33+
} else if (!displayValue.toString().includes('.')) {
34+
displayValue += '.';
35+
}
36+
updateDisplay();
37+
}
38+
39+
function inputOperator(nextOperator) {
40+
const inputValue = parseFloat(displayValue);
41+
if (operator && waitingForSecondOperand) {
42+
operator = nextOperator;
43+
return;
44+
}
45+
if (firstOperand === null) {
46+
firstOperand = inputValue;
47+
} else if (operator) {
48+
const result = performCalculation[operator](firstOperand, inputValue);
49+
displayValue = `${parseFloat(result.toFixed(7))}`;
50+
firstOperand = result;
51+
}
52+
waitingForSecondOperand = true;
53+
operator = nextOperator;
54+
updateDisplay();
55+
}
56+
57+
const performCalculation = {
58+
'/': (firstOperand, secondOperand) => firstOperand / secondOperand,
59+
'*': (firstOperand, secondOperand) => firstOperand * secondOperand,
60+
'+': (firstOperand, secondOperand) => firstOperand + secondOperand,
61+
'-': (firstOperand, secondOperand) => firstOperand - secondOperand,
62+
'%': (firstOperand, secondOperand) => firstOperand % secondOperand,
63+
};
64+
65+
function calculate() {
66+
if (operator && !waitingForSecondOperand) {
67+
const result = performCalculation[operator](firstOperand, parseFloat(displayValue));
68+
displayValue = `${parseFloat(result.toFixed(7))}`;
69+
firstOperand = null;
70+
operator = null;
71+
waitingForSecondOperand = false;
72+
updateDisplay();
73+
}
74+
}
75+
76+
updateDisplay();

0 commit comments

Comments
 (0)