Skip to content

Commit 22933a6

Browse files
coder-czycoder-czy
committed
a vue and css case
0 parents  commit 22933a6

File tree

4 files changed

+232
-0
lines changed

4 files changed

+232
-0
lines changed

‎calculator.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>calculator</title>
8+
<script src="../vue.js"></script>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div id="app">
14+
<div class="calculator">
15+
<div class="result" style="grid-area: result">
16+
{{ equation }}
17+
</div>
18+
19+
<button style="grid-area: ac" @click="clear">AC</button>
20+
<button style="grid-area: plus-minus" @click="calculateToggle">±</button>
21+
<button style="grid-area: percent" @click="calculatePercentage">%</button>
22+
<button style="grid-area: add" @click="append('+')">+</button>
23+
<button style="grid-area: subtract" @click="append('-')">-</button>
24+
<button style="grid-area: multiply" @click="append('×')">×</button>
25+
<button style="grid-area: divide" @click="append('÷')">÷</button>
26+
<button style="grid-area: equal" @click="calculate">=</button>
27+
28+
<button style="grid-area: number-1" @click="append(1)">1</button>
29+
<button style="grid-area: number-2" @click="append(2)">2</button>
30+
<button style="grid-area: number-3" @click="append(3)">3</button>
31+
<button style="grid-area: number-4" @click="append(4)">4</button>
32+
<button style="grid-area: number-5" @click="append(5)">5</button>
33+
<button style="grid-area: number-6" @click="append(6)">6</button>
34+
<button style="grid-area: number-7" @click="append(7)">7</button>
35+
<button style="grid-area: number-8" @click="append(8)">8</button>
36+
<button style="grid-area: number-9" @click="append(9)">9</button>
37+
<button style="grid-area: number-0" @click="append(0)">0</button>
38+
39+
<button style="grid-area: dot" @click="append('.')">.</button>
40+
</div>
41+
</div>
42+
<script src="./main.js"></script>
43+
44+
</body>
45+
46+
</html>

‎main.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
new Vue({
2+
el: '#app',
3+
data: {
4+
equation: '0',
5+
isDecimalAdded: false,
6+
isOperatorAdded: false,
7+
isStarted: false,
8+
},
9+
methods: {
10+
// Check if the character is + / - / × / ÷
11+
isOperator(character) {
12+
return ['+', '-', '×', '÷'].indexOf(character) > -1
13+
},
14+
// When pressed Operators or Numbers
15+
append(character) {
16+
// Start
17+
if (this.equation === '0' && !this.isOperator(character)) {
18+
if (character === '.') {
19+
this.equation += '' + character
20+
this.isDecimalAdded = true
21+
} else {
22+
this.equation = '' + character
23+
}
24+
25+
this.isStarted = true
26+
return
27+
}
28+
29+
// If Number
30+
if (!this.isOperator(character)) {
31+
if (character === '.' && this.isDecimalAdded) {
32+
return
33+
}
34+
35+
if (character === '.') {
36+
this.isDecimalAdded = true
37+
this.isOperatorAdded = true
38+
} else {
39+
this.isOperatorAdded = false
40+
}
41+
42+
this.equation += '' + character
43+
}
44+
45+
// Added Operator
46+
if (this.isOperator(character) && !this.isOperatorAdded) {
47+
this.equation += '' + character
48+
this.isDecimalAdded = false
49+
this.isOperatorAdded = true
50+
}
51+
},
52+
// When pressed '='
53+
calculate() {
54+
let result = this.equation.replace(new RegExp('×', 'g'), '*').replace(new RegExp('÷', 'g'), '/')
55+
56+
this.equation = parseFloat(eval(result).toFixed(9)).toString()
57+
this.isDecimalAdded = false
58+
this.isOperatorAdded = false
59+
},
60+
// When pressed '+/-'
61+
calculateToggle() {
62+
if (this.isOperatorAdded || !this.isStarted) {
63+
return
64+
}
65+
66+
this.equation = this.equation + '* -1'
67+
this.calculate()
68+
},
69+
// When pressed '%'
70+
calculatePercentage() {
71+
if (this.isOperatorAdded || !this.isStarted) {
72+
return
73+
}
74+
75+
this.equation = this.equation + '* 0.01'
76+
this.calculate()
77+
},
78+
// When pressed 'AC'
79+
clear() {
80+
this.equation = '0'
81+
this.isDecimalAdded = false
82+
this.isOperatorAdded = false
83+
this.isStarted = false
84+
}
85+
}
86+
})

‎style.css

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
min-height: 100vh;
6+
background-color: #eee;
7+
}
8+
9+
.calculator {
10+
--button-width: 80px;
11+
--button-height: 80px;
12+
display: grid;
13+
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";
14+
grid-template-columns: repeat(4, var(--button-width));
15+
grid-template-rows: repeat(6, var(--button-height));
16+
box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1), 8px 8px 16px -10px rgba(0, 0, 0, .15);
17+
padding: 24px;
18+
border-radius: 20px;
19+
}
20+
21+
.calculator button {
22+
margin: 8px;
23+
padding: 0;
24+
border: 0;
25+
display: block;
26+
outline: none;
27+
border-radius: calc(var(--button-height) / 2);
28+
font-size: 24px;
29+
font-family: Helvetica;
30+
font-weight: normal;
31+
color: #999;
32+
background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);
33+
box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .3);
34+
}
35+
36+
.calculator button:active {
37+
box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset;
38+
}
39+
40+
.result {
41+
text-align: right;
42+
line-height: var(--button-height);
43+
font-size: 48px;
44+
font-family: Helvetica;
45+
padding: 0 20px;
46+
color: #666;
47+
overflow: hidden;
48+
}

‎test.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
<input type="text">
12+
<button>解码</button>
13+
14+
<script>
15+
var inp = document.getElementsByTagName('input')[0]
16+
var btn = document.getElementsByTagName('button')[0]
17+
btn.onclick = function() {
18+
var val = inp.value
19+
var start = val.indexOf('[')
20+
var end = val.indexOf(']')
21+
var s = changeStr(start, end, val)
22+
console.log(s);
23+
24+
25+
}
26+
27+
function changeStr(start, end, val) {
28+
29+
var str = ''
30+
if (start != -1 && end != -1) {
31+
var text = ''
32+
var sStr = ''
33+
if (val.slice(0, start - 2).indexOf('[') == -1) {
34+
sStr = val.slice(0, start - 2)
35+
}
36+
var vStr = val.slice(start + 1, end)
37+
var num = val.slice(start - 1, start)
38+
// console.log(num);
39+
40+
for (var i = 0; i < num; i++) {
41+
text += vStr
42+
}
43+
str = text
44+
} else {
45+
return val
46+
}
47+
return str
48+
}
49+
</script>
50+
</body>
51+
52+
</html>

0 commit comments

Comments
 (0)