本文实例为大家分享了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
