本文實(shí)例為大家分享了javascript代碼實(shí)現(xiàn)簡單計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
一、實(shí)現(xiàn)功能
（1）利用css樣式、javascript語言和html語言實(shí)現(xiàn)計(jì)算器的算法 （2）對計(jì)算器的頁面進(jìn)行規(guī)劃以及對界面進(jìn)行顏色的填涂 （3）對界面各個(gè)邊框邊距進(jìn)行適當(dāng)?shù)恼{(diào)整
二、展示
1.代碼展示
代碼如下：
|
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
138
139
140
141
142
143
144
|
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>計(jì)算器</title> <style> body{ padding:0;margin:0; background-color:bisque; } #calculator{ position:absolute; width:1200px;height:620px; left:50%;top:50%; margin-left:-600px; margin-top:-310px; } #calculator #c_title{ margin:auto; width:800px; height:80px; margin-left: 150px; } #calculator #c_title h2{ text-align:center; font-size:33px;font-family:微軟雅黑;color:#666666; box-shadow: 1px 1px 1px 1px rgba(0, 0, 255, .2); } #calculator #c_text input{ padding-right:20px; margin-left: 50px; width:970px; height:50px; font-size:25px;font-family:微軟雅黑;color:#666666; text-align:right; border:double 1px; border:1px solid black; } #calculator #c_value{ widows: 1080px; height:408px; margin:20px auto; } #calculator #c_value ul{ margin:0px; } #calculator #c_value ul li{ margin:10px; list-style:none; float:left; width:180px; height:80px; line-height:80px; text-align:center; background-color:coral; border:0px solid black; font-size:30px; font-family:微軟雅黑; color:#666; box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); } #calculator #c_value ul li button{ width: 160px; height:40px; font-size: 20px; } </style> <script> function onload(){ //加載完畢后光標(biāo)自動(dòng)對應(yīng)到輸入框 document.getelementbyid("input").focus(); } //讀取按鈕的值，傳給輸入框 function inputevent(e){ //把val的值改為每個(gè)事件的innerhtml值 innerhtml 屬性 var val=e.innerhtml; //獲取input標(biāo)簽 var xsval=document.getelementbyid("input"); //標(biāo)簽里的value連接每個(gè)事件的innerhtml值 xsval.value+=val; } //計(jì)算出結(jié)果 function inputoper(){ var xsval=document.getelementbyid("input");//獲取input標(biāo)簽 xsval.value=eval(document.getelementbyid("input").value); //eval()方法計(jì)算 } //清零 function clearnum(){ var xsval=document.getelementbyid("input");//獲取input標(biāo)簽 xsval.value=""; document.getelementbyid("input").focus(); } //退格 function backnum(){ var arr=document.getelementbyid("input");//獲取input標(biāo)簽 arr.value=arr.value.substring(0,arr.value.length-1); //substring()提取第一個(gè)至倒數(shù)第二個(gè)字符串 } </script></head><body> <div id="calculator"> <!--標(biāo)題--> <div id="c_title"> <h2>計(jì)算器</h2> </div> <!--輸入框--> <div id="c_text"> <input type="text" id="input" value="0" readonly="readonly"> <!-- input (id)--> </div> <!--計(jì)算器按鈕元件--> <div id="c_value"> <ul> <li><button onclick="inputevent(this)">7</button></li> <!--onlick 鼠標(biāo)點(diǎn)擊函數(shù) this --> <li><button onclick="inputevent(this)">8</button></li> <li><button onclick="inputevent(this)">9</button></li> <li style="background: yellow"><button onclick="clearnum()">清零</button></li> <li style="background: burlywood"><button onclick="backnum()">退格</button></li> <li><button onclick="inputevent(this)">4</button></li> <li><button onclick="inputevent(this)">5</button></li> <li><button onclick="inputevent(this)">6</button></li> <li><button onclick="inputevent(this)">*</button></li> <li><button onclick="inputevent(this)">/</button></li> <li><button onclick="inputevent(this)">1</button></li> <li><button onclick="inputevent(this)">2</button></li> <li><button onclick="inputevent(this)">3</button></li> <li><button onclick="inputevent(this)">+</button></li> <li><button onclick="inputevent(this)">-</button></li> <li><button onclick="inputevent(this)">0</button></li> <li><button onclick="inputevent(this)">00</button></li> <li ><button onclick="inputevent(this)">.</button></li> <li><button onclick="inputevent(this)">%</button></li> <li style="background: red"><button onclick="inputoper(this)">=</button></li> </ul> </div> </div> </body></html> |
2.效果展示
效果如下：
3.總結(jié)
由于第一次書寫博客，頁面過于丑陋，見諒。改demo學(xué)會(huì)了如何用js實(shí)現(xiàn)html計(jì)算器，熟悉了js的基礎(chǔ)語法及基本使用。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/weixin_45876462/article/details/111571723
