用JS实现了一个简单的计算器。

时间：2022-12-29 14:20:59

----恢复内容开始---

     上午第二节课拿着电脑去教室，又练了上周老师讲的——用JS实现简单的计算器功能。连续点击数字按钮实现字符串相连那部分还是有点不太明白，晚上要再练习一遍。

     还练习了网页时钟。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>计算器</title>
 6     <style>
 7         div input{
 8             margin-top: 10px;
 9             height: 40px;
10             width: 40px;
11             border: none;
12             background-color: #999;
13         }
14         input{
15             border-radius: 8px;
16             
17         }
18     </style>
19 </head>
20 <body>
21     <input class="show" type="text" id="show">
22     <div>
23         <input type="button" value="1" id="number">
24         <input type="button" value="2" id="number">
25         <input type="button" value="3" id="number">
26         <input type="button" id="operate" value="+">
27     </div>
28     <div>
29         <input type="button" id="number" value="4">
30         <input type="button" id="number" value="5">
31         <input type="button" id="number" value="6">
32         <input type="button" id="operate" value="-">
33     </div>
34     <div>
35         <input type="button" id="number" value="7">
36         <input type="button" id="number" value="8">
37         <input type="button" id="number" value="9">
38         <input type="button" id="operate" value="*">
39     </div>
40     <div>
41         <input type="button" style="width: 130px;" id="number" value="0">
42         <input type="button" id="operate" value="/">
43     </div>
44     <div>
45         <input type="button" id="count" value="计算" style="width: 85px;">
46         <input type="button" id="clear" value="清除" style="width: 85px;">                
47     </div>
48     <script type="text/javascript" src="jquery-1.11.1.js"></script>
49     <script>
50         var shownum1 = "";
51         var shownum2 = "";
52         var ope = "";
53         $("input#number").click(function(){
54             if(ope == ""){
55                 $("#show").val(shownum1 + this.value);
56                 shownum1 = $("#show").val();
57             }else{
58                 $("#show").val(shownum2 + this.value);
59                 shownum2 = $("#show").val();
60             }
61         }).mousedown(function(){
62             $(this).css("background-color","#ccc");
63         }).mouseup(function(){
64             $(this).css("background-color","#999");
65         })
66         $("input#operate").click(function(){
67             ope = $(this).val();
68             // $("#show").val("");
69         }).mousedown(function(){
70             $(this).css("background-color","#ccc");
71         }).mouseup(function(){
72             $(this).css("background-color","#999");
73         })
74         $("#count").click(function(){
75             switch(ope){
76                 case "+" : $("#show").val(Number(shownum1) + Number(shownum2));break;
77                 case "-" : $("#show").val(Number(shownum1) - Number(shownum2));break;
78                 case "*" : $("#show").val(Number(shownum1) * Number(shownum2));break;
79                 case "/" : $("#show").val(Number(shownum1) / Number(shownum2));break;
80             }
81 
82         }).mousedown(function(){
83             $(this).css("background-color","#ccc");
84         }).mouseup(function(){
85             $(this).css("background-color","#999");
86         })
87         $("#clear").click(function(){
88             shownum1 = "";
89             shownum2 = "";
90             $("#show").val("");
91             ope = "";
92         }).mousedown(function(){
93             $(this).css("background-color","#ccc");
94         }).mouseup(function(){
95             $(this).css("background-color","#999");
96         })
97     </script>
98 </body>
99 </html>

 

---恢复内容结束--

标签：

相关文章