计算器(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)的主要内容,如果未能解决你的问题,请参考以下文章

ext html片段,ext.html · 潜行的青衣/jquery-ui-ext - Gitee.com

使用从循环内的代码片段中提取的函数避免代码冗余/计算开销

Extjs使用商店代理api; CRUD

未解决的对“片段”部分中的符号“”的引用

Ext.XTemplate

Android:向活动添加片段