本文實例為大家分享了javascript實現簡易計算器的具體代碼，供大家參考，具體內容如下
編輯了幾個小時研發了一個簡易好理解的計算器。不停改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>/* 定義兩個標簽來存放符號跟第一個值*/ <input type="text" id="text1" style="display:none"> <input type="text" id="per" style="display:none"> |
html部分的話就是吧所有數字定義為一個class名字，把所有運算符號定義為一個class 以及定義兩個input來存放運算符
|
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")//獲取所有的數字 opcr = document.querySelectorAll("#box ul .opcr")//獲取運算符 for (var i = 0; i < lis.length; i++) { //遍歷所有的數字 lis[i].onclick = function () { input1.value += parseInt(this.innerHTML)//點擊input1顯示 } } //遍歷所有的運算符 for (let i = 0; i < opcr.length; i++) { opcr[i].onclick = function () { if (text1.value == "") {//當存放第一個值為空時候 text1.value = input1.value//存放第一個值 input1.value = "" //input框里的值為空 per.value = this.innerHTML; //存放符號的值為空 } else { text1.value = eval(text1.value + per.value + input1.value)//不是空的時候 計算 per.value = this.innerHTML;//存放符號的值為點擊的值 input1.value = ""//input框里的值為空 } } } //等于 resule.onclick = function () { input1.value = eval(text1.value + per.value + input1.value)//計算里面的值 per.value = "" //清空存放per的值 text1.value = ""//input框里的值為空 } //點擊清空所有 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>簡易計算器</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")//獲取所有的數字 opcr = document.querySelectorAll("#box ul .opcr")//獲取+——*/ for (var i = 0; i < lis.length; i++) { //遍歷所有的數字 lis[i].onclick = function () { input1.value += parseInt(this.innerHTML)//點擊input1顯示 } } //遍歷所有的+——*/ for (let i = 0; i < opcr.length; i++) { opcr[i].onclick = function () { if (text1.value == "") {//當存放第一個值為空時候 text1.value = input1.value//存放第一個值 input1.value = "" //input框里的值為空 per.value = this.innerHTML; //存放符號的值為空 } else { text1.value = eval(text1.value + per.value + input1.value)//不是空的時候 計算值 per.value = this.innerHTML;//存放符號的值為點擊的值 input1.value = ""//input框里的值為空 } } } //等于 resule.onclick = function () { input1.value = eval(text1.value + per.value + input1.value)//計算里面的值 per.value = "" //清空存放per的值 text1.value = ""//input框里的值為空 } //點擊清空所有 returnZero.onclick = function () { input1.value = "" per.value = "" text1.value = "" } </script></body></html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/m0_52773472/article/details/109909622
