本文實(shí)例為大家分享了javascript實(shí)現(xiàn)簡易計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
編輯了幾個(gè)小時(shí)研發(fā)了一個(gè)簡易好理解的計(jì)算器。不停改Bug，終于改好了。
這是樣式
這是Css部分
|
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
|
<style> #box { background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); width: 500px; height: 420px; margin: auto; margin-top: 200px; position: relative; } .reckon { width: 280px; height: 200px; background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); ; position: absolute; top: 100px; left: 100px; border: 5px solid #2a2b2c } #input1 { background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); border: none; width: 220px; height: 8px; float: right; margin-top: 10px; margin-right: 20px; outline: none; padding: 10px } ul li { float: left; list-style: none; margin: 4px 2px; border-radius: 3px; background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); box-shadow: 2px 2px #ccc; color: #fff; font-weight: "楷體"; width: 50px; height: 30px; text-align: center; line-height: 30px; } ul { margin-top: 5px; } ul li:hover { opacity: 0.7; }</style> |
這是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
|
<div id="box"> <div class="reckon" id="reckon"> <input type="text" id="input1"> <ul> <li class="num">7</li> <li class="num">8</li> <li class="num">9</li> <li class="opcr">+</li> <li class="num">4</li> <li class="num">5</li> <li class="num">6</li> <li class="opcr">- </li> <li class="num">1</li> <li class="num">2</li> <li class="num">3</li> <li class="opcr">*</li> <li class="num">0</li> <li id="returnZero">C</li> <li id="resule">=</li> <li class="opcr">/</li> </ul> </div> </div>/* 定義兩個(gè)標(biāo)簽來存放符號跟第一個(gè)值*/ <input type="text" id="text1" style="display:none"> <input type="text" id="per" style="display:none"> |
html部分的話就是吧所有數(shù)字定義為一個(gè)class名字，把所有運(yùn)算符號定義為一個(gè)class 以及定義兩個(gè)input來存放運(yùn)算符
|
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
|
<script> lis = document.querySelectorAll("#box ul .num")//獲取所有的數(shù)字 opcr = document.querySelectorAll("#box ul .opcr")//獲取運(yùn)算符 for (var i = 0; i < lis.length; i++) { //遍歷所有的數(shù)字 lis[i].onclick = function () { input1.value += parseInt(this.innerHTML)//點(diǎn)擊input1顯示 } } //遍歷所有的運(yùn)算符 for (let i = 0; i < opcr.length; i++) { opcr[i].onclick = function () { if (text1.value == "") {//當(dāng)存放第一個(gè)值為空時(shí)候 text1.value = input1.value//存放第一個(gè)值 input1.value = "" //input框里的值為空 per.value = this.innerHTML; //存放符號的值為空 } else { text1.value = eval(text1.value + per.value + input1.value)//不是空的時(shí)候 計(jì)算 per.value = this.innerHTML;//存放符號的值為點(diǎn)擊的值 input1.value = ""//input框里的值為空 } } } //等于 resule.onclick = function () { input1.value = eval(text1.value + per.value + input1.value)//計(jì)算里面的值 per.value = "" //清空存放per的值 text1.value = ""//input框里的值為空 } //點(diǎn)擊清空所有 returnZero.onclick = function () { input1.value = "" per.value = "" text1.value = "" }</script> |
完整部分
|
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>簡易計(jì)算器</title> <style> #box { background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); width: 500px; height: 420px; margin: auto; margin-top: 200px; position: relative; } .reckon { width: 280px; height: 200px; background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); ; position: absolute; top: 100px; left: 100px; border: 5px solid #2a2b2c } #input1 { background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); border: none; width: 220px; height: 8px; float: right; margin-top: 10px; margin-right: 20px; outline: none; padding: 10px } ul li { float: left; list-style: none; margin: 4px 2px; border-radius: 3px; background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); box-shadow: 2px 2px #ccc; color: #fff; font-weight: "楷體"; width: 50px; height: 30px; text-align: center; line-height: 30px; } ul { margin-top: 5px; } ul li:hover { opacity: 0.7; } </style></head><body> <div id="box"> <div class="reckon" id="reckon"> <input type="text" id="input1"> <ul> <li class="num">7</li> <li class="num">8</li> <li class="num">9</li> <li class="opcr">+</li> <li class="num">4</li> <li class="num">5</li> <li class="num">6</li> <li class="opcr">- </li> <li class="num">1</li> <li class="num">2</li> <li class="num">3</li> <li class="opcr">*</li> <li class="num">0</li> <li id="returnZero">C</li> <li id="resule">=</li> <li class="opcr">/</li> </ul> </div> </div> <input type="text" id="text1" style="display:block"> <input type="text" id="per" style="display:block"> <script> lis = document.querySelectorAll("#box ul .num")//獲取所有的數(shù)字 opcr = document.querySelectorAll("#box ul .opcr")//獲取+——*/ for (var i = 0; i < lis.length; i++) { //遍歷所有的數(shù)字 lis[i].onclick = function () { input1.value += parseInt(this.innerHTML)//點(diǎn)擊input1顯示 } } //遍歷所有的+——*/ for (let i = 0; i < opcr.length; i++) { opcr[i].onclick = function () { if (text1.value == "") {//當(dāng)存放第一個(gè)值為空時(shí)候 text1.value = input1.value//存放第一個(gè)值 input1.value = "" //input框里的值為空 per.value = this.innerHTML; //存放符號的值為空 } else { text1.value = eval(text1.value + per.value + input1.value)//不是空的時(shí)候 計(jì)算值 per.value = this.innerHTML;//存放符號的值為點(diǎn)擊的值 input1.value = ""//input框里的值為空 } } } //等于 resule.onclick = function () { input1.value = eval(text1.value + per.value + input1.value)//計(jì)算里面的值 per.value = "" //清空存放per的值 text1.value = ""//input框里的值為空 } //點(diǎn)擊清空所有 returnZero.onclick = function () { input1.value = "" per.value = "" text1.value = "" } </script></body></html> |
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/m0_52773472/article/details/109909622
