计算器（Ext）
Posted 易行周
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了计算器（Ext）相关的知识，希望对你有一定的参考价值。
<html> <head> <title>计算器</title> <meta charset="UTF-8"> <link href="ext-6.2.1/build/classic/theme-neptune-touch/resources/theme-neptune-touch-all.css" rel="stylesheet" type="text/css" /> <link href="ext-6.2.1/build/examples/kitchensink/neptune-touch-en/resources/KitchenSink-all.css" rel="stylesheet" type="text/css" /> <script src="ext-6.2.1/build/ext-all.js" type="text/javascript"></script> <script src="ext-6.2.1/build/classic/locale/locale-zh_CN.js" type="text/javascript"></script> <script src="ext-6.2.1/build/packages/charts/classic/charts.js"></script> </head> <style type="text/css"> table{ margin:20px 0 0 20px; font-size:20px ; //line-height:40px; border:1px solid #000; //padding:3px; } th{ text-align:center; } #Calculator{border:1px solid #000;} #result{width:156px;} .cal{ width:40px; height:40px; text-align:center; } .number{ width:40px; height:40px; text-align:center; } .op{ width:40px; height:40px; text-align:center; } .sign{ width:40px; height:40px; text-align:center; } .cmd{ width:80px; height:40px; text-align:center; } </style> <body> <table cellpadding="1" border="0"> <tr style="border:1px solid #000;background:#2159C2;color:#fff"> <th colspan="4">计算器</th> </tr> <tr> <td colspan="4" align="center"> <input id="result" readonly="true" style="text-align:right;" type="text" value="0"/> </td> </tr> <tr> <td colspan="2"> <input class="cmd" type="button" value="="/></td> <td colspan="2"> <input class="cmd" type="button" value="C"/></td> </tr> <tr> <td ><input class="number" type="button" value="7"/></td> <td ><input class="number" type="button" value="8"/></td> <td ><input class="number" type="button" value="9"/></td> <td ><input class="op" type="button" value="+"/></td> </tr> <tr> <td ><input class="number" type="button" value="4"/></td> <td ><input class="number" type="button" value="5"/></td> <td ><input class="number" type="button" value="6"/></td> <td ><input class="op" type="button" value="-"/></td> </tr> <tr> <td ><input class="number" type="button" value="1"/></td> <td ><input class="number" type="button" value="2"/></td> <td ><input class="number" type="button" value="3"/></td> <td ><input class="op" type="button" value="*"/></td> </tr> <tr> <td ><input class="number" type="button" value="0"/></td> <td ><input class="sign" type="button" value="-/+"/></td> <td ><input class="sign" type="button" value="."/></td> <td ><input class="op" type="button" value="/"/></td> </tr> </table> <script type="text/javascript"> var cal=function(){ switch(op){ case "-": first=parseFloat(first)-parseFloat(second); break; case "*": first=parseFloat(first)*parseFloat(second); break; case "/": second=parseFloat(second) if(second!=0) first=parseFloat(first)/second break; default : first=parseFloat(first)+parseFloat(second); break; } op=""; if(arguments.length>0)op=arguments[0]; second=""; //first=""; result.value=first; } first=""; second=""; op=""; result=Ext.getDom("result"); //console.log(result) Ext.addBehaviors({ "input.number@click":function(e,el){ if(Ext.isEmpty(op)){ if(!(el.value==0 && first==0)){ first=first+el.value; console.log(first) result.value=first; console.log(result.value) } }else{ if(!(el.value==0 && second==0)){ second=second+el.value; result.value=second; } } }, "input.cmd@click":function(e,el){ if(el.value=="C"){ if(Ext.isEmpty(op)){ first=""; result.value=first }else{ second=""; result.value=second } result.value="0" }else{ cal(); } }, "input.sign@click":function(e,el){ if(el.value=="."){ if(Ext.isEmpty(op)){ if(first.toString().indexOf(".")==-1){ first=first+"."; result.value=first; } }else{ if(second.toString().indexOf(".")==-1){ second=second+"."; result.value=second; } } }else{ if(Ext.isEmpty(op)){ first=first*-1; result.value=first; }else{ second=second*-1; result.value=second; } } }, "input.op@click":function(e,el){ if(Ext.isEmpty(op) || Ext.isEmpty(second)){ op=el.value; result.value="0"; }else{ cal(el.value); } } }) </script> </body> </html>
需要导入（Ext 所需的包）
效果图
以上是关于计算器（Ext）的主要内容，如果未能解决你的问题，请参考以下文章