<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. ssh框架实现员工部门增删改查源码

    http://pan.baidu.com/s/1qYLspDM 备注:IDE是eclipse,前端使用bootstrap,数据库是mysql

  2. Python pandas ERROR 2006 (HY000): MySQL server has gone away

    之前在做python pandas大数据分析的时候,在将分析后的数据存入mysql的时候报ERROR 2006 (HY000): MySQL server has gone away 原因分析:在对百 ...

  3. LeetCode第[15]题(Java)：3Sum 标签：Array

    题目难度:Medium 题目: Given an array S of n integers, are there elements a, b, c in S such that a + b + c  ...

  4. 用vue官方提供的模板vue-cli搭建一个helloWorld案例

    安装环境 安装node.js并配置环境变量 安装淘宝镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpac ...

  5. 《JAVA程序设计与实例》记录与归纳--类与对象

    类与对象 概念贴士: 1. 类必须先定义了才能使用.类是创建对象的模板,创建对象也叫类的实例化. 2. 在Java中,使用new关键字来创建对象,一般有一下3个步骤: 1)声   明:声明一个对象,包 ...

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

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

  7. 自定义注解,andjdk提供的元注解

    @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) @Documented public @interface FruitN ...

  8. HTML元素分类【三种类型】

      在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素. 块状元素:display:block内联元素:display:inline 内联块状 ...

  9. python os 模块

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cdos.curdir ...

  10. 阿里云Centos 7.4 mssql-server

    1.阿里云服务器控制台,开启1433端口(出入方向都要开).自从微软发布linux版本后,控制台常用端口下拉列表也增加了1433. 2.如果你没配置阿里云yum源,可参照配置一下.http://www ...