<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 所需的包）
效果图
