<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. MySQL 5.7 InnoDB缓冲池NUMA功能支持——但是别高兴的太早

    当前CPU都已是NUMA架构,相信除了历史遗留系统,很少会有数据库跑在SMP的CPU上了.NUMA架构带来的优势无言而语,CPU更快的内存访问速度,但是带来的问题也不言而喻,特别是对于数据库的影响.M ...

  2. IdentityServer Topics（6）- Windows身份验证

    在支持的平台上,您可以让IdentityServer使用Windows身份验证(例如,对Active Directory)对用户进行身份验证. 当您使用以下身份托管IdentityServer时,当前 ...

  3. kmalloc、vmalloc、__get_free_pages()的区别

    一.分布位置上的区别: kmalloc()和__get_free_pages()函数申请的内存位于物理内存的映射区域,而且在物理上也是连续的,它们与真实的物理地址只有一个固定的偏移,因此存在简单的线性 ...

  4. JavaScript基础知识（数组）

    21.数组 定义数组 * 字面量方式  var 数组名称 = [ value,value,... ] * 构造函数方式 var 数组名称 = new Array(value,value,...):   ...

  5. Python 解析构建数据大杂烩 -- csv、xml、json、excel

    Python 可以通过各种库去解析我们常见的数据.其中 csv 文件以纯文本形式存储表格数据,以某字符作为分隔值,通常为逗号:xml 可拓展标记语言,很像超文本标记语言 Html ,但主要对文档和数据 ...

  6. 小乔注：java关键字this

    java中当一个对象创建后,java虚拟机就会给这个对象分配一个指向自己的指针,称为this.this随实例化对象而产生,因此this只用于非静态方法体内.主要有以下四点应用: 1.调用当前类的成员变 ...

  7. flask-script组件

    Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...

  8. IntelliJ IDEA 17和Maven构建javaWeb项目

    前言 电脑又断电了,眼看着写好的东西就没有了,这是第二次犯这个错误了.很难受呀!还是回到正题吧,我们来使用IDEA和Maven构建一个JavaWeb项目 软件环境: IDEA:2017.2.1 JDK ...

  9. 查找算法的实现(C/C++实现)

    存档: #include <stdio.h> #include <stdlib.h> #define max 20 typedef int keytype; #include ...

  10. hackerrank Alex对战Fedor

    任意门 为了在漫长得飞行旅途中娱乐,Alex和Fedor发明了如下的一个简单的双人游戏.游戏是: 首先, Alex画一个有权无向图.该图中可能有多重边(多重边的权值可能相同或者不同). 然后,Fedo ...