计算器（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
这个改动主要是使用工厂模式替代了简单工厂模式,这样做的好处是如果以后我们要扩充其他运算时,就不用总是去修改工厂类, 这是可以采取工厂模式,主要是将原来简单工厂类的逻辑判断分离出来,将它作为一个借口,与 ...
随机推荐
- JSP动态产生的代码，点击显示确认操作，根据操作跳转并传值。
假如有如下一段代码产生了多个选项我们改如何获得点击删除一项中的值? <%List<Theme> themelist=(List<Theme>)request.getAtt ...
- 5分钟了解MySQL5.7的undo log在线收缩新特性
Part1:写在最前 在MysQL5.6版本中,可以把undo log 回滚日志分离到一个单独的表空间里:其缺点是不能回收空间大小,until MysQL5.7,but MariadDB10.1暂不支 ...
- 在Java Web项目中添加定时任务
在Java Web程序中加入定时任务,这里介绍两种方式:1.使用监听器注入:2.使用Spring注解@Scheduled注入. 推荐使用第二种形式. 一.使用监听器注入 ①:创建监听器类: impor ...
- mongodb 聚合查询
操作符介绍: $project:包含.排除.重命名和显示字段 $match:查询,需要同find()一样的参数 $limit:限制结果数量 $skip:忽略结果的数量 $sort:按照给定的字段排序结 ...
- Java DB访问之 JDBC
项目说明 项目采用 maven 组织 ,jdbc 唯一的依赖就是 mysql-connector-java pom 依赖如下: <dependency> <groupId>my ...
- Machine Learning - week 4 - 编程练习
= X' * (h - y) LrCostFunction 与上一周的有什么不同? 与 week3 的 costFunctionReg 是一样的.Week3 中参考答案没有排除 theta 第一行,但 ...
- JavaScript的ajax使用
使用ajax首先定义个XMLHttpRequest变量,为了判断对IE6以及以下版本的兼容性,需要var xmlHR; if (window.XMLHttpRequest) { ...
- JavaProblem之hashCode详解
一.HashCode简介 1.1.什么是Hash和Hash表 要想清楚hashCode就要先清楚知道什么是Hash 1)Hash hash是一个函数,该函数中的实现就是一种算法,就是通过一系列的算法来 ...
- CTF---Web入门第八题 Guess Next Session
Guess Next Session分值:10 来源: iFurySt 难度:易 参与人数:3870人 Get Flag:1672人 答题人数:1690人 解题通过率:99% 写个算法没准就算出来了, ...
- POJ 1739：Tony's Tour
Description A square township has been divided up into n*m(n rows and m columns) square plots (1< ...