-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path计算器.html
101 lines (91 loc) · 3.77 KB
/
计算器.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #eee;
}
.calculator{
--button-width: 80px;
--button-height: 80px;
display: grid;
grid-template-areas: "result result result result"
"ac plus-minus percent divide"
"number-7 number-8 number-9 multiply"
"number-4 number-5 number-6 subtract"
"number-1 number-2 number-3 add"
"number-0 number-0 dot equal";
grid-template-columns: repeat(4,var(--button-width));
grid-template-rows:repeat(6,var(--button-width));
box-shadow: -8px -8px 16px -10px rgba(255,255,255,1), 8px 8px 16px -10px rgba(0,0,0,0.15);
padding:24px;
border-radius: 5%;
}
.calculator button{
margin:8px;
padding: 0;
border:0;
display:block;
outline:none;
border-radius:calc(var(--button-width)/2);
font-size: 24px;
font-family:Helvetica;
font-weight:normal;
color: #999;
background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);
/* background: linear-gradient(135deg, rgba(230, 230, 230, 1）
0%, rgba(246, 246, 246, 1) 100%); */
box-shadow:-4px -4px 10px -8px rgba(255,255,255,1),4px 4px 10px -8px rgba(0,0,0,0.3);
}
.calculator button:active{
box-shadow:-4px -4px 10px -8px rgba(255,255,255,1),4px 4px 10px -8px rgba(0,0,0,0.3) inset;
}
.result{
text-align:right;
line-height:calc(var(--button-width));
font-size:48px;
font-family:Helvetica;
padding:0 20px;
color: #666;
}
</style>
</head>
<script>
</script>
<body>
<div id="app">
<div class="calculator">
<div class="result" style="grid-area: result">
{{equation}}
</div>
<button style="grid-area: ac" @click="clear">AC</button>
<button style="grid-area: plus-minus" @click="calculateToggle">±</button>
<button style="grid-area: percent" @click="calculateToggle">％</button>
<button style="grid-area: add" @click="append('＋')">＋</button>
<button style="grid-area: subtract" @click="append('－')">－</button>
<button style="grid-area: multiply" @click="append('×')">×</button>
<button style="grid-area: divide" @click="append('÷')">÷</button>
<button style="grid-area: equal" @click="calculate">＝</button>
<button style="grid-area: number-1" @click="append('1')">1</button>
<button style="grid-area: number-2" @click="append('2')">2</button>
<button style="grid-area: number-3" @click="append('3')">3</button>
<button style="grid-area: number-4" @click="append('4')">4</button>
<button style="grid-area: number-5" @click="append('5')">5</button>
<button style="grid-area: number-6" @click="append('6')">6</button>
<button style="grid-area: number-7" @click="append('7')">7</button>
<button style="grid-area: number-8" @click="append('8')">8</button>
<button style="grid-area: number-9" @click="append('9')">9</button>
<button style="grid-area: number-0" @click="append('0')">0</button>
<button style="grid-area:dot " @click="append('.')">.</button>
</div>
</div>
</body>
</html>