先根据常见计算器设计界面的大致布局：
根据以前的html和css知识，在页面上实现大致的样子
html(index.html)：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>简单计算器</title> 6 <link rel="stylesheet" href="css/1.css"> 7 <script src="js/1.js"></script> 8 </head> 9 <body> 10 <div id="d0"> 11 <div id="d1"> 12 <input type="text" id="t1"/> 13 </div> 14 <div id="d2"> 15 <input type="button" class="b" value="C"/> 16 </div> 17 <div id="d3"> 18 <input type="button" class="b" value="7"/> 19 <input type="button" class="b" value="8"/> 20 <input type="button" class="b" value="9"/> 21 <input type="button" class="b" value="/"/> 22 <input type="button" class="b" value="4"/> 23 <input type="button" class="b" value="5"/> 24 <input type="button" class="b" value="6"/> 25 <input type="button" class="b" value="*"/> 26 <input type="button" class="b" value="1"/> 27 <input type="button" class="b" value="2"/> 28 <input type="button" class="b" value="3"/> 29 <input type="button" class="b" value="-"/> 30 <input type="button" class="b" value="0"/> 31 <input type="button" class="b" value="."/> 32 <input type="button" class="b" value="="/> 33 <input type="button" class="b" value="+"/> 34 </div> 35 </div> 36 </body> 37 </html>
CSS(1.css):
1 body{
2 display: flex;
3 justify-content: center;
4 }
5 #d0{
6 border: 1px solid;
7 width: 400px;
8 text-align: center;
9 margin-top: 20px;
10 padding-top: 30px;
11 padding-bottom: 30px;
12 }
13 #d2{
14 margin-top: 20px;
15 text-align: right;
16 }
17 #d3{
18 display: flex;
19 flex-wrap: wrap;
20 }
21 #t1{
22 width: 380px;
23 font-size: 200%;
24 }
25 .b{
26 width: 80px;
27 height: 60px;
28 margin: 10px;
29 font-size: 180%;
30 }
效果：
为界面上的控件添加处理的函数（1.js）：
1 var t;
2 function myinit()
3 {
4 let a=document.querySelectorAll(".b");
5 t=document.querySelector("#t1");
6 t.value="";
7 for(i=0;i<a.length;i++)
8 {
9 a[i].onclick=mybutton;
10 }
11 document.querySelector("#c").onclick=function (){t.value="";};
12 document.querySelector("#eq").onclick=function (){t.value=eval(t.value);};
13 }
14 function mybutton()
15 {
16 t.value+=this.value;
17 }
第1行的t是全局变量。
第2-13行的函数“myinit”需要在页面元素加载完成后执行。故应把html的第9行改为 <body onl oad="myinit()">
第16行的this表示触发该函数的控件。
也可以把14-17行的mybutton函数在第9行写成匿名函数。
调整文本框内容靠右显示，简单计算器即可正常工作。
标签：flex,--,top,js,width,html,计算器 From： https://www.cnblogs.com/wanjinliu/p/17437240.html