Extjs4学习笔记-计算器

最新推荐文章于 2020-12-25 23:22:50 发布
最新推荐文章于 2020-12-25 23:22:50 发布
阅读量112 收藏
点赞数
分类专栏： ExtJS 文章标签： javascript xhtml ViewUI

主要练习addBehaviors()函数使用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>计算器</title>
		
		<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
		<script type="text/javascript" src="../extjs/bootstrap.js"></script>
		<script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
		
		<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;
				height: 30px;
				font-size: 16px;
				font-weight: bold;
			}
			
			.cal, .number, .op, .sign {
				width: 40px;
				height: 40px;
				text-align: center;
			}
			
			.cmd {
				width: 80px;
				height: 40px;
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
		Ext.onReady(function() {
			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) - parseFloat(second);
						}
						break;
					default:
						first = parseFloat(first) + parseFloat(second);
						break;
				}
				op = "";
				if(arguments.length > 0) {
					op = arguments[0];
				}
				second = "";
				result.value = first;
			}
			
			var first = "";	//用来保存第一个数字
			var second = "";	//用来保存第二个数字
			var op = "";	//用来保存运算符
			var result = Ext.getDom("result");	//指向结果文本框的DOM对象
			
			Ext.addBehaviors({
				
				"input.number@click" : function(e, el) {
					if(Ext.isEmpty(op)) {
						if(!(el.value == 0 && first == 0)) {
							first = first + el.value;
							result.value = first;
						}
					} 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 = "";
						} else {
							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 += ".";
								result.value = first;
							}
						} else {
							if(second.toString().indexOf(".") == -1) {
								second += ".";
								result.value = second;
							}
						}
					} else {
						if(Ext.isEmpty(op)) {
							first *= -1;
							result.value = first;
						} else {
							second *= -1;
							result.value = sceond;
						}
					}
				},
				
				"input.op@click" : function(e, el) {
					if(Ext.isEmpty(op) || Ext.isEmpty(second)) {
						op = el.value;
						result.value = "0";
					} else {
						cal(el.value);
					}
				}
				
			});
		});
		</script>
		
	</head>
	<body>
		<table cellpadding="1" cellspacing="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="sign" type="button" value="-/+" /></td>
				<td><input class="number" type="button" value="0" /></td>
				<td><input class="sign" type="button" value="." /></td>
				<td><input class="op" type="button" value="/"/ /></td>
			</tr>
		</table>
	</body>
</html>

 

愤怒的根号三
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EXTJS4.1计算器插件
11-25
由于开发WEB需要一个WEB计算器插件，在网上找EXTJS4计算器插件没有一个，找extjs4.0计算器找到一个，但由于代码太多，在主界面上写太多代码，自我感觉以后看起来吃力，思路一下子不好摸到。因此写了这个插件，分享给大家。用的时候只需var caculatepanel = new Ext.create('Ext.ux.Caculate', { region: 'east', iconCls: 'icon-help' })就行了
Extjs 计算器 javascript计算器
04-15
用Extjs 的xtemplate写的网页使用计算器 模仿Window的简单计算器，运行index.html可以直接跑
extjs4计算器插件开发
zwp20002的专栏
11-25 515
刚学EXTJS， 由于开发web使用需要个计算器，在网上找extjs4计算器插件没发现一个，因此只能自己写，参考http://www.uspcat.com/forum.php?mod=viewthread&tid=2006一个计算器原码，使用Sencha Architect2.1开发，先上个图片： 代码如下： Ext.define('Ext.ux.Caculate', {     e
Extjs的一些常用工具方法
lovekang的专栏
10-10 186
一、Ext 　1.1　　Ext.isEmpty(v, allowBlank)　　//是否为空[链接] 　1.2　　Ext.isArray(v)　　　　 //是否为数组集合 　1.3　　Ext.isPrimitive(v)　　 //是否是基本数据类型String/Number/Boolean 　1.4　　Ext.isFunction(v)　　 //是否是函数 　1.5　　Ext.isN...
Ext学习日记——网页计算器示例
iteye_2863的博客
05-19 159
  网页计算器是方便用户进行数学计算的一种有力工具。传统的网页计算器通过纯JvaScript在客户端实现，计算逻辑易被用户获取，安全性不高。通过Ajax优化过的网页计算器将主要的计算逻辑放在服务器端进行运算，客户端服装收集用户输入的表达式，提高了程序的安全性非常适合于有安全要求的场合。       /* * 网页计算器示例 */ Ext.onReady(function()...
extJs+2.1学习笔记.pdf
06-15
本学习笔记将深入探讨ExtJS 2.1的关键概念和技术，帮助读者掌握这个框架的核心要素。 1. **ExtJs 结构树** 在ExtJS中，应用程序通常基于组件树构建，每个组件都有自己的属性、方法和事件。理解这种结构对于布局...
ExtJS笔记---Grid实现后台分页
04-05
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
语言程序设计资料：ExtJs学习笔记-2积分.doc
09-17
语言程序设计资料：ExtJs学习笔记-2积分.doc
ExtJS笔记----FormPanel的使用
04-04
NULL 博文链接：https://lucky16.iteye.com/blog/1490278
ExtJS 6 学习笔记
12-07
本来我是打算自己写一个系列的 ExtJS 6 学习笔记的，因为 ExtJS 6 目前的中文 学习资料还很少。 google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电 子书 [Ext JS 6 By Example] 。这份资料在 PACKT 上卖 ...
【小工具】原生JS的计算器
zuncle的博客
02-10 914
【小工具】原生JS的计算器<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>写给新手：js表单操作（四） 简单计算器（二）</title> <style type="text/css"> body {
extjs 实现 NumberField 即时计算
隋旭峰的专栏
10-16 5786
例如有三列NumberField，分别是：开始量 结束量  差。实现输入完开始量和结束量，即时自动计算差并填充。 在Ext.form.NumberField加入listeners，选用的事件为“change” var paramStart = new Ext.form.NumberField({ id:"paramStart", fieldLa
数据结构--简单实现计算器
哥不帅但很坏的博客
03-17 7569
数据结构--简单实现计算器 中缀表达式转为后缀表达式实现计算器
制作简易计算器配置文件
游海东的技术专栏
06-15 1461
web.xml： <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http
extjs 在textfield后面加一个button_编写一个计算器 利用react hook + context
weixin_29420299的博客
12-25 127
通过编写一个计算器 来加深 对 react hook 和 context api 的理解我们要实现上面这样的计算器 第一步利用 create-react-app 快速创建项目npx create-react-app calculatorcd随后你会得到一个这样的目录第二步 构建程序主体结构我们创建一个Calculator.js 的文件这个 文件里面需要 有计算器的展示显示屏，还有数字操作面板imp...
js 实现精确加减乘除
weixin_30532369的博客
09-05 78
//加法 function accAdd(arg1, arg2) { var r1, r2, m; try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toString().split(".")[...
大整数加减乘除模板
luckyrass的专栏
10-17 1229
关于整数加减乘除的题很多，例如leetcode中的 29. Divide Two Integers 题意 Divide two integers without using multiplication, division and mod operator. If it is overflow, return MAX_INT. 题解： public class Sol

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值