计算器（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
这个改动主要是使用工厂模式替代了简单工厂模式,这样做的好处是如果以后我们要扩充其他运算时,就不用总是去修改工厂类, 这是可以采取工厂模式,主要是将原来简单工厂类的逻辑判断分离出来,将它作为一个借口,与 ...
随机推荐
- linux系统编辑神器 -vim用法大全
vim编辑器 文本编辑器,字处理器ASCII nano, sed vi: Visual Interfacevim: VI iMproved 全屏编辑器,模式化编辑器 vim模式:编辑模式(命令模式)输 ...
- InnoDB锁机制
1. 锁类型 锁是数据库区别与文件系统的一个关键特性,锁机制用于管理对共享资源的并发访问. InnoDB使用的锁类型,分别有: 共享锁(S)和排他锁(X) 意向锁(IS和IX) 自增长锁(AUTO-I ...
- 利用 html2canvas 做个简单的诗词卡片生成器
html2canvas 简介 html2canvas 顾名思义,就是一个可以把 DOM 元素转换成图片的类库,常用于网页截图.网页截图常见的应用场景是,在意见反馈里对当前页面进行截图,方便反馈页面出现 ...
- 七牛php-sdk使用
使用七牛云存储服务有一年多了,大部分功能基于其PHP-SDK来做开发,现对sdk的一些功能做一个总结. 一.资源上传 上传资源文件到七牛空间的不同实现方法 二.文档转换 介绍如何使用七牛以及七牛第三方 ...
- 手把手教你用Vue造轮子（3）：开发可排序的表格组件
前言 最近闰土大叔跟Vue干上了,没办法,公司业务驱动,不用Vue没招啊,leader尝到了前后端分离带来的好处,除非你离职,哈哈哈,当然,那是不可能的,对于我这种要攒钱买房子的人来说.那还说什么呢, ...
- 循序渐进之Spring AOP(2) - 基本概念
学习AOP前要先了解几个重要术语:Joinpoint.Pointcut.Advice 仍然以改装车比喻,拿到心爱的汽车后想做改装,第一件事是什么?找到要改装的地方.车上可改装的地方很多,但每个人感兴趣 ...
- Python scikit-learn机器学习工具包学习笔记
feature_selection模块 Univariate feature selection:单变量的特征选择 单变量特征选择的原理是分别单独的计算每个变量的某个统计指标,根据该指标来判断哪些指标 ...
- Sql的基础知识技巧（三）
三.技巧 1.1=1,1=2 的使用,在 SQL 语句组合时用的较多 "where 1=1" 是表示选择全部 "where 1=2"全部不选, 如:if @st ...
- 我的第二个网页制作：p,hn,br标签的使用
<html> <head> <title>这是我的第二个html代码</title> <body> <!-- <p>Hel ...
- SpringMVC框架学习笔记（1）——HelloWorld
搭建SpringMVC框架 1.添加jar包 jsp-api.jar servlet-api.jar jstl.jar commons-logging-1.1.1.jar spring-beans-4 ...