本文實例為大家分享了javascript代碼實現簡單計算器的具體代碼，供大家參考，具體內容如下
一、實現功能
（1）利用css樣式、javascript語言和html語言實現計算器的算法 （2）對計算器的頁面進行規劃以及對界面進行顏色的填涂 （3）對界面各個邊框邊距進行適當的調整
二、展示
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>計算器</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(){ //加載完畢后光標自動對應到輸入框 document.getelementbyid("input").focus(); } //讀取按鈕的值，傳給輸入框 function inputevent(e){ //把val的值改為每個事件的innerhtml值 innerhtml 屬性 var val=e.innerhtml; //獲取input標簽 var xsval=document.getelementbyid("input"); //標簽里的value連接每個事件的innerhtml值 xsval.value+=val; } //計算出結果 function inputoper(){ var xsval=document.getelementbyid("input");//獲取input標簽 xsval.value=eval(document.getelementbyid("input").value); //eval()方法計算 } //清零 function clearnum(){ var xsval=document.getelementbyid("input");//獲取input標簽 xsval.value=""; document.getelementbyid("input").focus(); } //退格 function backnum(){ var arr=document.getelementbyid("input");//獲取input標簽 arr.value=arr.value.substring(0,arr.value.length-1); //substring()提取第一個至倒數第二個字符串 } </script></head><body> <div id="calculator"> <!--標題--> <div id="c_title"> <h2>計算器</h2> </div> <!--輸入框--> <div id="c_text"> <input type="text" id="input" value="0" readonly="readonly"> <!-- input (id)--> </div> <!--計算器按鈕元件--> <div id="c_value"> <ul> <li><button onclick="inputevent(this)">7</button></li> <!--onlick 鼠標點擊函數 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.總結
由于第一次書寫博客，頁面過于丑陋，見諒。改demo學會了如何用js實現html計算器，熟悉了js的基礎語法及基本使用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_45876462/article/details/111571723
