KonishiLee's Blog

iPhone 上的计算机

主题

这一篇文章主要讲的是用 Js 实现 iPhone 手机上的计算机

代码

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
<div class="header">
<input type="text" id="ipt" input="handleChange">
</div>
<div class="content">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><button class="btn default">AC</button></td>
<td><button class="btn default">+/-</button></td>
<td><button class="btn default">%</button></td>
<td><button class="btn operator">÷</button></td>
</tr>
<tr>
<td><button class="btn default">7</button></td>
<td><button class="btn default">8</button></td>
<td><button class="btn default">9</button></td>
<td><button class="btn operator">×</button></td>
</tr>
<tr>
<td><button class="btn default">4</button></td>
<td><button class="btn default">5</button></td>
<td><button class="btn default">6</button></td>
<td><button class="btn operator">-</button></td>
</tr>
<tr>
<td><button class="btn default">1</button></td>
<td><button class="btn default">2</button></td>
<td><button class="btn default">3</button></td>
<td><button class="btn operator">+</button></td>
</tr>
<tr>
<td colspan="2"><button class="btn default">0</button></td>
<td><button class="btn default">.</button></td>
<td><button class="btn operator">=</button></td>
</tr>
</tbody>
</table>
</div>
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
<style>
body{
width: 100%;
height: 100%;
display: flex;
margin: 0;
display: inline-table;
}
.header{
height: 15%;
width: 100%;
background: black;
min-height: 80px;
display: table-row;
}
.header input{
width: 100%;
height: 100%;
background-color: black;
border: 0;
color: white;
font-size: 30px;
text-align: right;
padding: 5px;
font-weight: lighter;
}
.content{
width: 100%;
display: table-row;
}
table{
width: 100%;
height: 100%;
border: 0;
margin: 0;
padding: 0;
}
td{
text-align: center;
border-bottom: 1px solid #A9A9A9;
border-right: 1px solid #A9A9A9;
width: 25%;
}
button{
width: 100%;
height: 100%;
border: 0;
font-size: 30px;
font-weight: lighter;
}
button:hover{
border: 0;
}
.operator{
background-color: #FF8800;
}
.default {
background-color: #D3D3D3;
}
</style>
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
102
<script>
var firNum = 0, secNum = 0, optor = '', result = 0;
$('ipt').addEventListener('input', function(){
let val = this.value;
this.value = '';
this.value = val;
this.focus();
});
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e){
let val = e.target.innerHTML;
switch(val){
case 'AC':
$('ipt').value = '';
reset();
break;
case '+/-':
$('ipt').value = 0 - parseFloat($('ipt').value);
break;
case '%':
operator('%')
break;
case '÷':
operator('/')
break;
case '×':
operator('*')
break;
case '-':
operator('-')
break;
case '+':
operator('+')
break;
case '=':
equal()
break;
default:
$('ipt').value += val;
break;
}
$('ipt').focus();
});
}
function $(id){
return document.getElementById(id);
}
function operator(char){
firNum = $('ipt').value;
optor = char;
$('ipt').value = '';
}
function equal(){
secNum = $('ipt').value;
switch(optor){
case '/':
result = parseFloat(firNum) / parseFloat(secNum)
break;
case '*':
result = parseFloat(firNum) * parseFloat(secNum)
break;
case '+':
result = parseFloat(firNum) + parseFloat(secNum)
break;
case '-':
result = parseFloat(firNum) - parseFloat(secNum)
break;
case '%':
result = parseFloat(firNum) % parseFloat(secNum)
break;
default:
result = '错误';
break;
}
$('ipt').value = result;
reset();
}
function reset(){
firNum = 0;
secNum = 0;
optor = '';
result = 0;
}
</script>
如果喜欢这个分享,就帮忙买杯咖啡吧