<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. MFC中属性表单和向导对话框的使用

    每次在使用MFC创建一个框架时,需要一步步选择自己的程序的外观,基本功能等选项,最后MFC会生成一个基本的程序框架,这个就是向导对话框:而属性表单则是另外一种对话框,表单上有多个属性页,每点击某一页, ...

  2. 登陆模块的进化史，带大家回顾java学习历程（一）

    一直在想着写点特别点的东西,让有兴趣学编程的人确实能学到点干货,今天就来随意写写. 大家在网上查找资料看到最多的demo估计就是登陆功能的演示了,为何大家偏爱拿登陆来做demo呢?因为行业应用类程序的 ...

  3. 移动端web总结

    viewport 通用模版: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. HDFS中namenode启动失败

    1.环境配置: -1.core-site.xml文件 <configuration> <property> <name>fs.defaultFS</name& ...

  5. JAVA中的 static使用

    主要内容: 1.静态变量 2.静态方法 3.静态代码块 静态变量 我们知道,可以基于一个类创建多个该类的对象,每个对象都拥有自己的成员,互相独立.然而在某些时候,我们更希望该类所有的对象共享同一个成员 ...

  6. Mvc 模板化的Razor引擎委托

    最近在研究NopCommerce,它后台用的富文本编辑器可根据语言库加载不同语言的编辑器,其中用到了模板化Razor引擎委托,参考这儿 废话不多说,直接上代码. public static class ...

  7. deeplearning.ai 人工智能行业大师访谈 Ian Goodfellow 听课笔记

    1. Ian Goodfellow之前是做神经科学研究,在斯坦福上了Andrew NG的课之后,Ian决定投身AI.在寒假他和小伙伴读了Hinton的论文,然后搭了一台用CUDA跑Boltzmann ...

  8. hdu_1015(dfs)

    题意:根据给出的计算公式,给一个n和一个字符集,问能不能在字符串集中找到不重复的五个字符,让其计算结果等于给定的n,如果有多个解输出字典序最大的一个 题解:dfs直接上代码了 code: #inclu ...

  9. python算法运算

    >>> b = 10>>> b /= 8>>> b1.25>>> 10 // 81>>> **幂运算 > ...

  10. Java入门篇（五）——Java的字符串/String类

    前面在举例时有出现过String的例子,当时肯定有一部分朋友不知道这个是做什么用的.其实String类是Java中一个比较特殊的类,字符串即String类,它不是Java的基本数据类型之一,但可以像基 ...