js应用--简单计算器

先根据常见计算器设计界面的大致布局：

根据以前的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 onload="myinit()">

第16行的this表示触发该函数的控件。

也可以把14-17行的mybutton函数在第9行写成匿名函数。

调整文本框内容靠右显示，简单计算器即可正常工作。

注：以上代码中，存在一些微小的问题。请彻底理解并自行补足。

posted on 2023-05-30 10:59 万金流阅读(181) 评论(0) 编辑收藏举报