Skip to content

Instantly share code, notes, and snippets.

@huanle0610

huanle0610/calc.html

Created April 2, 2014 03:35
Show Gist options
  • Save huanle0610/9927548 to your computer and use it in GitHub Desktop.
Save huanle0610/9927548 to your computer and use it in GitHub Desktop.
Download ZIP
Extjs4 calc
Raw
calc.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器－Ext4js</title>
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css">
<style>
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>
</head>
<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>
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) / parseFloat(second);
}
break;
default :
first = parseFloat(first) + parseFloat(second);
break;
}
op = '';
if(arguments.length > 0) op = arguments[0];
second = '';
result.value = first;
}
var first = '';
var second = '';
var op = '';
var result = Ext.getDom('result');
//Applies event listeners to elements by selectors
// when the document is ready. The event name is specified with an @ suffix.
Ext.addBehaviors({
'input.number@click':function(e, el){
console.log(e, el)
if(Ext.isEmpty(op)){
if(!(el.value==0 && first == 0)){
first = first + el.value;
result.value = first;
}
}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 = "";
}else{
second = '';
}
result.value='0';
}else{
cal();
}
},
'input.sign@click':function(e, el){
console.log(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></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment