<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）的更多相关文章

  1. Ext实现简单计算器

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!少帅的博客 使用Ext实现简单计算器,网页版实现 1.页面部分calculator. ...

  2. java实现可有括号的android计算器

    写了一个android版的计算器,可以计算带括号的表达式,不过前提是:正确的表达式才行 小缺陷是没有做表达式括号的控制,现在还没有想到好的控制方式 package javaAdvanced; impo ...

  3. [转载]ExtJs4 笔记（3） Ext.Ajax 对ajax的支持

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)     本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事 ...

  4. EXT ajax简单实例

    转载:http://www.cnblogs.com/xiepeixing/archive/2012/10/24/2736751.html EXT ajax request是ext中对于ajax请求的实 ...

  5. ExtJs4 笔记（3） Ext.Ajax 对ajax的支持

    本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展的常用函数等.Ajax服务端交互式操作是提交到.NET MVC.后续服务端交互都采用这一方式实现. ...

  6. Ext JS 6学习文档-第3章-基础组件

    Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...

  7. 12. Ext.Ajax 对ajax的支持

    转自:http://www.cnblogs.com/lipan/archive/2011/12/09/2272793.html 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封 ...

  8. 1.C#WinForm基础制作简单计算器

    利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...

  9. 自己动手写计算器v1.1

    这个改动主要是使用工厂模式替代了简单工厂模式,这样做的好处是如果以后我们要扩充其他运算时,就不用总是去修改工厂类, 这是可以采取工厂模式,主要是将原来简单工厂类的逻辑判断分离出来,将它作为一个借口,与 ...

随机推荐

  1. 【费用流】BZOJ1061: [Noi2008]志愿者招募（这题超好）

    1061: [Noi2008]志愿者招募 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 5291  Solved: 3173[Submit][Stat ...

  2. CMDB运维开发项目

    ITIL:Information Technology Infrastructure Library 信息技术基础架构库,主要适用于IT服务管理(ITSM).ITIL为企业的IT服务管理实践提供了一个 ...

  3. 意外断电数据库无法启动牵扯到异步IO的参数设置

    一客户机房新装的UPS不太稳定,好几次意外断电,第3次意外断电之后问题终于来了, 数据库起不来了-- 数据库的硬件环境是一台IBM DS5020存储,2台IBM X3850 X5 软件环境是Linux ...

  4. Spring boot(三)整合mybaties+thymeleaf实现基础crud

    工程结构: 首先在pom文件中引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xml ...

  5. (转)Android Studio Error:Failed to resolve: com.android.support:appcompat-v7:25.1.0解决方案

    今天不知道为什么导入eclipse项目后就出现了错误,没导入之前是正常使用AS的 Error:(26, 13) Failed to resolve: com.android.support:appco ...

  6. HDU6166-Senior Pan-Dijkstra迪杰斯特拉算法(添加超源点,超汇点)+二进制划分集合-2017多校Team09

    学长好久之前讲的,本来好久好久之前就要写题解的,一直都没写,懒死_(:з」∠)_ Senior Pan Time Limit: 12000/6000 MS (Java/Others)    Memor ...

  7. c语言基础学习08_内存管理

    =============================================================================涉及到的知识点有:一.内存管理.作用域.自动变 ...

  8. Solr6.0与Jetty、Tomcat在Win环境下搭建/部署

    摘要: Solr6的新特性包括增强的edismax,对SQL更好的支持--并行SQL.JDBC驱动.更多的SQL语法支持等,并且在Solr6发布以后,Solr5还在持续更新,对于想尝鲜Solr6的用户 ...

  9. RPM包效验

  10. UEP-按钮控制及时间

    按钮的判断 var record = ajaxgrid.getAllRecords(); if(record.length>0){ var isPack=record[0].get(" ...