<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. CSS列表及导航条

    大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条.   垂直导航条 注意要点: 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0. 以em设置 ...

  2. Python 浅析线程（threading模块）和进程（process）

    线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 进程与线程 什么 ...

  3. promise间隔时间添加dom

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  4. 从Unity中的Attribute到AOP(六)

    本文将重点对Unity剩下常用的Attribute进行讲解,其他不常用的Attribute各位可以自行去官方文档查阅. 首先是UnityEngine命名空间下的. ColorUsage,这个主要作用于 ...

  5. metasploit联动beef启动

    (温馨提示:请按照步骤来,否则beef到后面会启动不了) 我们首先进入vim /usr/share/beef-xss/config.yaml 找到metasploit把它改为启动 把false改为tr ...

  6. JavaSE（六）包装类、基本类型和字符串之间的转换、==和equals的区别

    一.包装类 Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足, 在设计类时为每个基本数据类型设计了一个对应的类进行代表,这 ...

  7. bzoj:1700: [Usaco2007 Jan]Problem Solving 解题

    Description 过去的日子里,农夫John的牛没有任何题目. 可是现在他们有题目,有很多的题目. 精确地说,他们有P (1 <= P <= 300) 道题目要做. 他们还离开了农场 ...

  8. dfs学习总结

    今天做到了dfs的训练,感觉和bfs有相似之处,接下来用一道题来总结一下方法,可类比bfs. 上题: Description There is a rectangular room, covered ...

  9. angular $stateProvider 路由的使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. TI-RTOS 定时器的使用

    定时器 在TI-RTOS中属于内核的一部分,因此想了解它的使用还是要阅读Bios_User_Guide.pdf. 主要用到这么几个API, 加粗字体 更多的定义可以在 ..\packages\ti\s ...