前端练习之计算器
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>计算器</title> 6 <style> 7 /*css reset*/ 8 *{ 9 margin:0; 10 padding:0px; 11 } 12 /*全局设置*/ 13 body{ 14 background-color:#32485F; 15 font-family:"Courier New"; 16 } 17 /*主面板*/ 18 .container{ 19 margin:0 auto; 20 width:80%; 21 text-align:center; 22 } 23 /*计算器面板*/ 24 .calc{ 25 /*border:1px solid #00405B;*/ 26 width:400px; 27 margin:8px; 28 /*position:relative;*/ 29 transition: all 0.30s ease-in-out; 30 -webkit-transition: all 0.30s ease-in-out; 31 -moz-transition: all 0.30s ease-in-out; 32 border: #35a5e5 1px solid; 33 border-radius: 4px; 34 outline: none; 35 box-shadow: 0 0 5px rgba(81, 203, 238, 1); 36 -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1); 37 -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1); 38 } 39 /*计算器屏幕*/ 40 .screen{ 41 /*position:absolute; 42 bottom:0px; */ 43 background-color:#217FBC; 44 height:150px; 45 color:white; 46 font-size:33px; 47 text-align:right; 48 overflow-y:auto; 49 /*margin-right:10px;*/ 50 /*vertical-align*/ 51 /*position:bottom;*/ 52 } 53 /*计算器的主题*/ 54 .calcBody{ 55 background-color:#00405B; 56 } 57 /*单元格按钮样式*/ 58 .calcBody td{ 59 border-radius:100px; 60 border:1px solid white; 61 color:white; 62 display:table-cell; 63 font-size:50px; 64 /*font-weight:bold;*/ 65 text-align:center; 66 vertical-align:middle; 67 width:100px; 68 height:100px 69 } 70 /*鼠标移上来手型*/ 71 .calcBody td:hover{ 72 cursor:pointer; 73 } 74 /*鼠标单击反馈*/ 75 .calcBody td:active{ 76 background-color:#00A0C2; 77 } 78 </style> 79 </head> 80 <body> 81 82 83 84 <div class="container"> 85 <div class="calc"> 86 <div class="screen"></div> 87 <div class="calcBody"> 88 <table> 89 <tbody> 90 <tr> 91 <td>C</td> 92 <td><-</td> 93 <td>÷</td> 94 <td>*</td> 95 </tr> 96 <tr> 97 <td>7</td> 98 <td>8</td> 99 <td>9</td> 100 <td>-</td> 101 </tr> 102 <tr> 103 <td>4</td> 104 <td>5</td> 105 <td>6</td> 106 <td>+</td> 107 </tr> 108 <tr> 109 <td>1</td> 110 <td>2</td> 111 <td>3</td> 112 <td rowspan="2">=</td> 113 </tr> 114 <tr> 115 <td colspan="2">0</td> 116 <td>.</td> 117 </tr> 118 </tbody> 119 </table> 120 </div> 121 122 </div> 123 </div> 124 125 126 127 128 129 130 131 132 133 134 </body> 135 </html> 136 <script> 137 var numA=""; 138 var numB=""; 139 var oper=undefined; 140 var renew=true; 141 142 var screen=(function(){ 143 return document.getElementsByClassName("screen")[0]; 144 })(); 145 146 (function(){ 147 var cells=document.getElementsByTagName("td"); 148 for(var i=0;i<cells.length;i++){ 149 // cells[i].style.cursor="pointer"; 150 // console.log(cells[i].style.cursor); 151 // console.log(cells[i].innerHTML); 152 cells[i].onclick=function(){ 153 if(renew){ 154 screen.innerHTML=""; 155 renew=false; 156 } 157 var v=this.innerHTML; 158 switch(v){ 159 case "0": 160 case "1": 161 case "2": 162 case "3": 163 case "4": 164 case "5": 165 case "6": 166 case "7": 167 case "8": 168 case "9": 169 oper?numB+=v:numA+=v; 170 screen.innerHTML+=v; 171 break; 172 case "C": 173 clean(); 174 break; 175 case "<-": 176 var s=screen.innerHTML; 177 if(s.length<1) break; 178 s=s.substring(0,s.length-1); 179 screen.innerHTML=s; 180 oper?numB=numB.substring(0,numB.length-1):numA=numA.substring(0,numB.length-1); 181 break; 182 case ".": 183 if(oper){ 184 if(numB=="") break; 185 if(numB.indexOf(".")!=-1) break; 186 numB+=v; 187 screen.innerHTML+="."; 188 }else{ 189 if(numA=="") break; 190 if(numA.indexOf(".")!=-1) break; 191 numA+=v; 192 screen.innerHTML+="."; 193 } 194 break; 195 case "+": 196 case "-": 197 case "*": 198 case "÷": 199 if(numA==""){ 200 screen.innerHTML="首先输入数字"; 201 clean(); 202 break; 203 }else if(oper){ 204 break; 205 } 206 oper=v; 207 screen.innerHTML+="<br/>"+v+"<br/>"; 208 break; 209 case "=": 210 if(!oper){ 211 // clean(); 212 screen.innerHTML="请选择运算类型<br/>"; 213 clean(); 214 break; 215 } 216 numA=Number(numA); 217 numB=Number(numB); 218 var res="无法运算"; 219 switch(oper){ 220 case "+": 221 res=numA+numB; 222 break; 223 case "-": 224 res=numA-numB; 225 break; 226 case "*": 227 res=numA*numB; 228 break; 229 case "÷": 230 res=(numB==0)?"<span color='red'>∞</span>":(numA/numB); 231 break; 232 } 233 screen.innerHTML+="<br/>"+res+"<br/>"; 234 clean(); 235 break; 236 } 237 } 238 } 239 })(); 240 241 242 function clean(){ 243 numA=""; 244 numB=""; 245 oper=undefined; 246 renew=true; 247 } 248 249 250 </script>
