计算器（Ext）
<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）的更多相关文章
- Ext实现简单计算器
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!少帅的博客 使用Ext实现简单计算器,网页版实现 1.页面部分calculator. ...
- java实现可有括号的android计算器
写了一个android版的计算器,可以计算带括号的表达式,不过前提是:正确的表达式才行 小缺陷是没有做表达式括号的控制,现在还没有想到好的控制方式 package javaAdvanced; impo ...
- [转载]ExtJs4 笔记（3） Ext.Ajax 对ajax的支持
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事 ...
- EXT ajax简单实例
转载:http://www.cnblogs.com/xiepeixing/archive/2012/10/24/2736751.html EXT ajax request是ext中对于ajax请求的实 ...
- ExtJs4 笔记（3） Ext.Ajax 对ajax的支持
本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展的常用函数等.Ajax服务端交互式操作是提交到.NET MVC.后续服务端交互都采用这一方式实现. ...
- Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
- 12. Ext.Ajax 对ajax的支持
转自:http://www.cnblogs.com/lipan/archive/2011/12/09/2272793.html 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封 ...
- 1.C#WinForm基础制作简单计算器
利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...
- 自己动手写计算器v1.1
这个改动主要是使用工厂模式替代了简单工厂模式,这样做的好处是如果以后我们要扩充其他运算时,就不用总是去修改工厂类, 这是可以采取工厂模式,主要是将原来简单工厂类的逻辑判断分离出来,将它作为一个借口,与 ...
随机推荐
- python py2与py3的编码问题
一:什么是编码 将明文转换为计算机可以识别的编码文本称为"编码".反之从计算机可识别的编码文本转回为明文为"解码". 那么什么是明文呢,首先我们从一段信息说起, ...
- 【转载】Linux cgroup资源隔离各个击破之 - cpu隔离1
Linux cgroup 有两个子系统支持CPU隔离.一个是cpu子系统,另一个是cpuset子系统. cpu子系统根据进程设置的调度属性,选择对应的CPU资源调度方法 .1. 完全公平调度 Comp ...
- iOS 横竖屏适配 笔记
研究消息转发机制 已经一周多了,但是 还是没整理出博客, 还是先写一个 项目中遇到的 横竖屏适配问题. // 开启自动转屏 - (BOOL)shouldAutorotate { return YES; ...
- CSS属性：定位属性（图文详解）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...
- HTML5——localStorage
html5的学习,忘记的差不多了,特地拿出来重新记录一下,从它的本地存储开始吧! 假设这样的html结构: <div id= "one_storage" class=&quo ...
- oracle练习--@余生请指教多
--1.查询出每个员工的编号,姓名,职位select Emp_id,Ename,job from emp;--2.查询每个员工的岗位名称select Ename,job from emp;--3.计算 ...
- [bzoj1717][Usaco2006 Dec]Milk Patterns 产奶的模式 (hash构造后缀数组，二分答案)
以后似乎终于不用去学后缀数组的倍增搞法||DC3等blablaSXBK的方法了= = 定义(来自关于后缀数组的那篇国家集训队论文..) 后缀数组:后缀数组SA是一个一维数组,它保存1..n的某个排列S ...
- BZOJ2726: [SDOI2012]任务安排
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2726 倒着做,前面的点对后面的点都是有贡献的. f[i]=min(f[j]+cost[i]*( ...
- 备份的一些小tip
// npm官方镜像 npm config set registry=http://registry.npmjs.org // 亚马逊S3 host 219.76.4.4 github-cloud.s ...
- 关于JAVA实现二维码以及添加二维码LOGO
今天在公司,完成了之前的任务,没有什么事做,就想鼓捣一下二维码,因为之前没有接触过,我就去翻看了几本书,也基本完成了二维码的实现,以及添加二维码的LOGO. 现在绘制二维码一般都使用的是谷歌的zxin ...