科学计算器 ZENO 5000

分享于 

34分钟阅读

Web开发

  繁體

介绍

科学计算器 ZENO-5000 是一个轻量级的web应用程序( <40kb ),利用最新的html5/css3特性和客户端 jquery/java脚本。 应用程序不包括任何图形文件。 它可以移植,能够在 pc/移动设备上在线/离线模式下运行。

背景

计算器软件实现为网络"瘦客户端"应用需要"实时"互联网连接。 在这种方法中有一些优点和缺点: "瘦客户机"web应用程序"零可以安装"平台/操作系统独立,可以移植/能够在任何主流浏览器( 也就是说,网络浏览器迅速成为用户友好的事实"虚拟操作系统"在网络应用和服务方面取代真正的操作系统)。 但是,互联网连接的需求有一定的限制;它很希望有计算器应用程序,能够在线模式下运行。 一个可能的解决方案是通过客户端脚本( 主要是JavaScript代码) 实现应用程序,它与任何主流的web浏览器兼容。 这样的web应用程序可以像通常一样在线运行,也可以在客户机平台上下载和缓存。

一个可能的解决方案是使用客户端脚本( 主要是JavaScript代码) 实现应用程序,它与任何主要的现有web浏览器兼容。 这样的web应用程序可以在线模式下运行,也可以在客户机平台上下载和缓存。 对于此类"通用"解决方案,有几个核心要求:

  • 它必须是独立于平台/操作系统,能够在 4个主要浏览器( Mozilla,微软,Google Chrome 和苹果 Safari ) 内部运行。
  • 安装过程必须简单且简单,就像复制粘贴一样"
  • 它应该有一个非常小的"数字足迹",考虑到便携设备上潜在的内存空间限制

遵循 上面 设计原则将确保OSC的高可移植性和它与大多数可用的移动/固定计算平台的一致性。

科学计算器 ZENO-5000,示例屏幕截图

zeno/Calculator_Screen1.jpg

Fig.1.科学计算器 ZENO-5000 示例屏幕快照显示扩展密钥板

zeno/Calculator_Screen2.jpg

Fig.2.科学计算器 ZENO-5000: 显示堆栈 register 弹出的示例屏幕快照

核心功能

  • 数据输入操作:用简单字表示,即单击任意数字键,或者输入常量值,如数字 pi,e,等等,,。
  • 一元操作:直接在输入框的内容上执行,如反向函数 1/x, 或者三角 sin(x)。
  • 要对数值对执行的二进制操作: 其中一个存储在称为"堆栈"的内部内存 register 中,第二个数字显示在输入框中。 这里类型包括所有四个算术运算,指数计算( y^x,它代表"y 功率x") 和百分比计算。

内存操作实际上是在每个现代计算器中实现的。 这个方便的特性允许中间结果存储在内部内存 register 中以便以后使用。 简言之,内存操作包括以下内容:

  • 将输入框的内容移动/复制到内存中( 使用向下箭头键)
  • 将内存的内容移动/复制到输入框( 使用向上箭头键)
  • 清除内存:单击内存框( 只需 below 输入框) 清除内容
  • 添加到内存( 使用标记为M+的密钥)
  • 从内存中减去( 使用标记为M-的密钥)

应用程序架构

在线科学计算器 ZENO-5000 ( 下拉 ZENO ) 作为富互联网应用程序 [1...3] 实现,利用新兴的Internet标准( html5/css3 ) 和客户端脚本( jquery/javascript )。 它可以在在线或者离线模式下在主流浏览器中运行: 要利用后者,必须下载应用程序文件并将它的存储在客户端的计算机上。 这些文件包括:

  • 主 file: zeno.htm (。文件包含到jQuery库联机的动态链接)
  • 样式表( CSS ) file: oscZeno.css
  • 使用Javascript编写的计算引擎: oscZeno.js
  • 参考 file: oscZenoRef.js

二进制操作涉及"堆栈"内存 register ( 变量 stackValue ),存储第一个操作数。 另一个变量 opCode 存储操作代码:

0-no operation 
1-Addition 
2-Subtraction 
3-Multiplication 
4-Division 
5-power (y^x) 
6-percent 

对堆栈的内容执行操作,并对输入框中输入的数值执行操作。 辅助 register ( var boolClear ) 提供了"在下一个数据输入前清除输入框"功能: 在输入另一个数值之前,它存储布尔值,强制代码清除输入 register。

Points of Interest

科学计算器 ZENO-5000 与基于 mozilla/webkit的网络浏览器完全兼容,可能使用 IE 9. 它已经在各种桌面和移动平台( ( iPod Touch ( Safari ) 和 Windows Phone 7 ) 上进行了测试。

项目 ZENO-5000 不使用任何图像文件,因此具有非常小的数字足迹。 通过 novel/5 3,介绍了通过新特性实现的所有美学增强,即: 圆角角,渐变,阴影,等等 最创新的HTML 5/CSS 3编码技术演示了 below:

清单 1: CSS代码Fragment用于将阴影添加到屏幕对象( 注释: 不需要图形图像)。

-moz-box-shadow:5px5px10px rgba(0,0,0,0.3);-webkit-box-shadow:5px5px10px rgba(0,0,0,0.3);box-shadow:5px5px10px rgba(0,0,0,0.3);

清单 2 : 用于实现圆角的CSS 3代码 Fragment ( note: 不需要图形图像)。

-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; 

清单 3: 用于创建颜色渐变( 在 IE <9中不工作)的CSS 3代码 Fragment。

/* WebKit */background: -webkit-gradient(linear, lefttop, righttop from(#ffffcc), to(#ffffff));/* Mozilla/Gecko */background: -moz-linear-gradient(left top, #ffffcc, #ffffff); 

清单 4: jQuery代码Fragment对文档加载事件执行了一个短动画,演示了切换功能。 最初,滑动面板显示为折叠模式( fig.3 )。

$(document).ready(function () {
 // ON LOAD ******************************************** $("div.oscExtControl").fadeTo(1000, 0.25,
 function () { $("div.oscExtControl").fadeTo(1000, 1.00); });
 // $("div.oscExtPanel").slideToggle("fast");
 $("div.oscStackRegister").slideToggle("normal");

清单 : jQuery代码Fragment启用了控制按钮( 参见 Fig.1, 2,显示扩展面板)的面板幻灯片。

// TOGGLE EXT PANEL ON CLICK$("div.oscExtControl").click(function () {
 var ctl = $(this);
 $("div.oscExtPanel").slideToggle("fast", function () {
 oscExtState =!oscExtState;
 if (oscExtState) ctl.html(strLess); else ctl.html(strMore);
 });
});

6: 可以利用一元操作直接应用于输入框的内容。

// UNARY OPERATIONS ******************************************************* $("button.keyPad_btnUnaryOp").click(function () {
 var inputBox = $(keyPad_UserInput);
 var x = parseFloat(inputBox.val());
 var retVal = oscError;
 switch (this.id) {
 // +/-case'keyPad_btnInverseSign': retVal = -x; break;
 // 1/Xcase'keyPad_btnInverse': retVal = 1/x; break;
 // X^2case'keyPad_btnSquare': retVal = x * x; break;
 // SQRT(X)case'keyPad_btnSquareRoot': retVal = Math.sqrt(x); break;
 // X^3case'keyPad_btnCube': retVal = x * x * x; break;
 // POW (X, 1/3)case'keyPad_btnCubeRoot': retVal = Math.pow(x, 1/3); break;
 // NATURAL LOGcase'keyPad_btnLn': retVal = Math.log(x); break;
 // LOG BASE 10case'keyPad_btnLg': retVal = Math.log(x)/Math.LN10; break;
 // E^(X)case'keyPad_btnExp': retVal = Math.exp(x); break;
 // SINcase'keyPad_btnSin': retVal = Math.sin(x); break;
 // COScase'keyPad_btnCosin': retVal = Math.cos(x); break;
 // TANcase'keyPad_btnTg': retVal = Math.tan(x); break;
 // CTGcase'keyPad_btnCtg': retVal = 1/Math.tan(x); break;
 // Arcsincase'keyPad_btnAsin': retVal = Math.asin(x); break;
 // Arccoscase'keyPad_btnAcos': retVal = Math.acos(x); break;
 // Arctagcase'keyPad_btnAtan': retVal = Math.atan(x); break;
 // Secantcase'keyPad_btnSec': retVal = 1/Math.cos(x); break;
 // Cosecantcase'keyPad_btnCosec': retVal = 1/Math.sin(x); break;
 // sinhcase'keyPad_btnSinH':
 retVal = (Math.pow(Math.E, x) - Math.pow(Math.E, -x))/2; break;
 // coshcase'keyPad_btnCosinH':
 retVal = (Math.pow(Math.E, x) + Math.pow(Math.E, -x))/2; break;
 // cothcase'keyPad_btnTgH':
 retVal = (Math.pow(Math.E, x) - Math.pow(Math.E, -x));
 retVal/= (Math.pow(Math.E, x) + Math.pow(Math.E, -x));
 break;
 // Secant hyperboliccase'keyPad_btnSecH':
 retVal = 2/(Math.pow(Math.E, x) + Math.pow(Math.E, -x)); break;
 // Cosecant hyperboliccase'keyPad_btnCosecH':
 retVal = 2/(Math.pow(Math.E, x) - Math.pow(Math.E, -x)); ; break;
 // 1+xcase'keyPad_btnOnePlusX': retVal = 1 + x; break;
 // 1-xcase'keyPad_btnOneMinusX': retVal = 1 - x; break;
 default: break;
 }
 boolClear = true;
 inputBox.val(retVal);
 inputBox.focus();
 });

在清单1 中列出了 : jQuery代码 Fragment,通过点击内存框来清除内存。在触摸屏移动设备中,特别有价值的便利特性。

// CLEAR MEM BOX BY CLICKING ON IT$("div#keyPad input.keyPad_TextBox").click(function () {
 var inBox = $(keyPad_UserInput);
 var mem = $(keyPad_Mem);
 switch (this.id) {
 //case 'keyPad_UserInput': $(keyPad_UserInput).val(strEmpty); break;case'keyPad_Mem': $(keyPad_Mem).val(strEmpty); memVal = 0; break;
 default: break;
 }
});

清单8: : 可以直接在扩展模式中输入的常量。

// CONST DATA ENTRY ******************************************************* $("button.keyPad_btnConst").click(function () {
 var retVal = strEmpty;
 switch (this.id) {
 // PIcase'keyPad_btnPi': retVal = Math.PI; break;
 // PI/2case'keyPad_btnPiDiv2': retVal = Math.PI/2; break;
 // PI/3case'keyPad_btnPiDiv3': retVal = Math.PI/3; break;
 // PI/4case'keyPad_btnPiDiv4': retVal = Math.PI/4; break;
 // PI/6case'keyPad_btnPiDiv6': retVal = Math.PI/6; break;
 // ecase'keyPad_btnE': retVal = Math.E; break;
 // 1/ecase'keyPad_btnInvE': retVal = 1/Math.E; break;
 // SQRT(2)case'keyPad_btnSqrt2': retVal = Math.SQRT2; break;
 // SQRT(3)case'keyPad_btnSqrt3': retVal = Math.sqrt(3); break;
 // CUBE ROOT OF(3)case'keyPad_btnCubeRoot2': retVal = Math.pow(2, 1/3); break;
 // Ln(10)case'keyPad_btnLn10': retVal = Math.LN10; break;
 // base10: Log(e)case'keyPad_btnLgE': retVal = Math.LOG10E; break;
 // Sigmas: defects probability: on scale 0...1// 1 Sigmacase'keyPad_btnSigma': retVal = 0.69; break;
 // 3 Sigmacase'keyPad_btnSigma3': retVal = 0.007; break;
 // 6 Sigmacase'keyPad_btnSigma6': retVal = 3.4 * Math.pow(10, -6); break;
 default: break;
 }
 boolClear = true;
 $(keyPad_UserInput).val(retVal);
 inputBox.focus();
 });

清单 9: 整个 CSS file:

/******************************************************************************
Project : Scientific Calculator
Module : CSS 3
Description : Implements HTML 5/CSS 3 advanced features
******************************************************************************
Author : Alexander Bell
Copyright : 2010 Infosoft International Inc
Date Created : 11/20/2010
Last Modified : 12/01/2010
******************************************************************************
DISCLAIMER: This Application is provide on AS IS basis without any warranty
You can use it at your sole risk.
******************************************************************************
TERMS OF USE : This module is copyrighted. You can use it provided that
 : you keep the original copyright note.
******************************************************************************/body {
 margin: 0;padding: 0;font-family: Arial, Calibri, Verdana, Tahoma, Times New Roman ;text-align: center;vertical-align: middle;background-color: #eaeaea;} /* CENTER COLUMN */.oscCenterColumn {
 width: 480px;padding: 10px 0px 0px 0px;margin: 10px auto;text-align: left;}/* MAIN DIV W/ALL CONTENTS */.oscMain {
 padding:10px;/* make rounded corners */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;/* add shadows */-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);box-shadow: 5px 5px 10px rgba(0,0,0,0.3);/* add gradient *//* WebKit */background: -webkit-gradient(linear, left top, left bottom, 
 from(#404040), to(#707070));/* Mozilla/Gecko */background: -moz-linear-gradient(top, #404040, #707070);}/* NEW TAGS ADDED IN HTML 5 */header, footer, nav { display:block }.oscTitle {
 float:right;margin:0px 0px 0px 0px; 
 font-size: 24px;font-weight:lighter;color: #dadada;vertical-align:middle;}
.oscModel {
 text-align:center;height:30px;line-height:30px;background-color: #303030;vertical-align:middle;}
.oscModel {
 width: 150px;margin:0px 0px 0px 0px;font-size: 24px;font-weight:bold;color: yellow;/* make rounded corners */-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;}/* NAV */button.oscNav 
{
 float:left;height:30px;line-height:30px;vertical-align:middle;font-size: 14px;font-family: Arial, Tahoma, Verdana, Calibri;color: #bababa;margin: 0px 0px 0px 3px;padding: 0px 5px 0px 5px;border: 1px solid olive;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; 
 background: #505050;background: -moz-linear-gradient(top, #909090, #505050 15px, #303030 15px, #202020);background: -webkit-gradient(linear, left top, left bottom, from(#909090),
 color-stop(0.5, #505050), color-stop(0.5, #303030), to(#202020));cursor: pointer;cursor: hand;}a { text-decoration:none;}button.oscNav:active { border: solid 2px #dadada; }button.oscNav:hover {
 background: #454545;background: -moz-linear-gradient(top, #505050, #202020 20px, #303030 20px, #909090);background: -webkit-gradient(linear, left top, left bottom, from(##505050),
 color-stop(0.5, #202020), color-stop(0.5, #303030), to(##909090));}/* EXTENDER CONTROL */.oscExtControl,. oscStackControl{
 float:right;margin:0px 0px 0px 5px;width:60px;height:30px;line-height:30px;vertical-align:middle;text-align:center;background-color: olive;color: #dadada;font-size: 22px;font-weight:bold;cursor: pointer;cursor: hand;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}/* stack register content */.oscStackRegister{
 position:absolute;width:310px;height:30px;line-height:30px;vertical-align:middle;margin:5px 0px 0px 10px;font-size: 22px;font-weight:normal;text-align:center;color:#eaeaea;background-color:Olive;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;filter:alpha(opacity=90);-moz-opacity:0.9;opacity: 0.9;z-index:20;cursor: pointer;cursor: hand;} /* extended functions area */.oscExtPanel{
 margin:0px; 
 padding: 5px 5px 5px 5px; 
 display:block; 
 background-color:#404040; 
 border: solid 1px Olive;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}/* DIV CONTAINING KEYS AND INPUT/MEM BOXES */div#keyPad { width: 100%; }/* KEYS RIGHT ALIGN */.keys_ToRight { float:right; }/******** CONTROLS: KEYS, INPUT/MEM TEXT BOXES *********/div#keyPadinput, div#keyPadbutton 
{
 height: 40px;vertical-align:middle;line-height:40px;margin: 0px;padding: 0px;border: 1px solid olive;font-family: Arial, Tahoma, Verdana, Calibri;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}div#keyPadbutton {
 width: 60px;text-align: center;font-size: 20px;cursor: pointer;cursor: hand;color: #dadada;font-weight:bold;/* add gradient using stop-color property: not working in IE<9 */background:#404040;background: -moz-linear-gradient(top, #dadada, #505050 20px, #303030 20px, #202020);background: -webkit-gradient(linear, left top, left bottom, from(#dadada),
 color-stop(0.5, #505050), color-stop(0.5, #303030), to(#202020));}div#keyPadbutton:active { border: solid 2px #707070; }div#keyPadbutton:hover {
 background: #454545;background: -moz-linear-gradient(top, #505050, #202020 20px, #303030 20px, #909090);background: -webkit-gradient(linear, left top, left bottom, from(##505050),
 color-stop(0.5, #202020), color-stop(0.5, #303030), to(##909090));}/* INPUT/MEM TEXT BOXES*/div#keyPadinput {
 width: 330px;text-align: left;text-indent:10px;font-size: 24px;color: #202020;/* add gradient *//* WebKit */background: -webkit-gradient(linear, left top, right top from(#ffffcc), to(#ffffff));/* Mozilla/Gecko */background: -moz-linear-gradient(left top, #ffffcc, #ffffff);}div#keyPadinput#keyPad_Mem {color: #909090;}/* ENTER BUTTON: QUAD WIDTH + 14 */div#keyPadbutton#keyPad_btnEnter { width:188px;font-size: 20px;color:Yellow;}/* INPUT/MEM KEYS*/div#keyPad. keyPad_btnMemOp{ font-size: 20px;color: Olive;}/* ZERO BUTTON: DOUBLE WIDTH + 4 */div#keyPadbutton#keyPad_btn0{ width: 125px; }/* BACKSPACE/CLEAR INPUT KEYS*/div#keyPadbutton#keyPad_btnBack,div#keyPadbutton#keyPad_btnClr,div#keyPadbutton#keyPad_btnAllClr{
 border-color:red;color:red;}div#keyPadbutton#keyPad_btnBack {font-size: 18px;}/* SPECIAL FORMATTING FOR SUPER-SCRIPT KEYS */div#keyPadbutton#keyPad_btnSquare,div#keyPadbutton#keyPad_btnCube,div#keyPadbutton#keyPad_btnExp,div#keyPadkeyPad_btnYpowX{ font-size: 16px; }/* CLEAR BOTH */.clear {clear:both;}
.oscDisclaimer 
{
 margin: 5px 0px 5px 0px;color: #adadad;font-weight: normal;font-size: 10pt;text-align:center;}
.oscNotice {
 margin-top:5px; 
 text-align:center;font-size: 12px;color: #606060;}
.oscSpacer2,. oscSpacer3,. oscSpacer5 {clear:both;width:100%;}
.oscSpacer2 {height:2px;}
.oscSpacer3 {height:3px;}
.oscSpacer5 {height:5px;}/* COMPATIBILITY W/OLD IE<9 */#ie { background-color: #303030; }/*************************************************/

清单 10: JavaScript计算引擎和jQuery动画增强:

/******************************************************************************
Project : ZENO-5000 | Online Scientific Calculator (OSC)
Module : oscZeno.js | jQuery/Javascript
Description : Implements Math functions through client-side scripting
******************************************************************************
Author : Alexander Bell
Copyright : 2010 Infosoft International Inc
Date Created : 11/20/2010
Last Modified : 12/01/2010
******************************************************************************
DISCLAIMER: This Application is provide on AS IS basis without any warranty
You can use it at your sole risk.
******************************************************************************
TERMS OF USE : This module is copyrighted. You can use it provided that
 : you keep the original copyright note.
******************************************************************************/// ******* MAIN **************************************************************$(document).ready(function () {
 // ON LOAD ******************************************** $("div.oscExtControl").fadeTo(1000, 0.25,
 function () { $("div.oscExtControl").fadeTo(1000, 1.00); });
 // $("div.oscExtPanel").slideToggle("fast");
 $("div.oscStackRegister").slideToggle("normal");
 // SHOW STACK REGISTER CONTENT and OpCode ********************************* $("div.oscStackControl").mouseover(function () {
 var ctl = $("div.oscStackRegister");
 var op = "";
 if (opCode == 1) op = " +";
 elseif (opCode == 2) op = " -";
 elseif (opCode == 3) op = " *";
 elseif (opCode == 4) op = "/";
 ctl.html(stackVal + op);
 ctl.show(300);
 })
. mouseout(function () { $("div.oscStackRegister").hide(); })
. mouseleave(function () { $("div.oscStackRegister").hide(); });
 // close stack register div $("div.oscStackRegister").click(function ()
 { $("div.oscStackRegister").hide(); });
 $(this).click(function () { $("div.oscStackRegister").hide(); });
 // CLEAR MEM ON CLICK $("div.oscMemLabel").click(function ()
 { $(keyPad_Mem).val(strEmpty); memVal = 0; });
 // TOGGLE EXT PANEL ON CLICK $("div.oscExtControl").click(function () {
 var ctl = $(this);
 $("div.oscExtPanel").slideToggle("fast", function () {
 oscExtState =!oscExtState;
 if (oscExtState) ctl.html(strLess); else ctl.html(strMore);
 });
 });
 //************************************************************************// DATA ENTRY: NUMERIC KEYS $("div#keyPad button.keyPad_btnNumeric").click(function () {
 var btnVal = $(this).html();
 var inBox = $(keyPad_UserInput);
 // clear input box if flag setif (boolClear) { inBox.val(strEmpty); boolClear = false; }
 var str = inBox.val();
 // limit the input lengthif (str.length> maxLength) return;
 // prevent duplicate dot entryif (this.id == "keyPad_btnDot" && str.indexOf('.')> = 0) return;
 inBox.val(str + btnVal);
 inBox.focus();
 });
 // CONST DATA ENTRY ******************************************************* $("button.keyPad_btnConst").click(function () {
 var retVal = strEmpty;
 switch (this.id) {
 // PI case'keyPad_btnPi': retVal = Math.PI; break;
 // PI/2 case'keyPad_btnPiDiv2': retVal = Math.PI/2; break;
 // PI/3 case'keyPad_btnPiDiv3': retVal = Math.PI/3; break;
 // PI/4 case'keyPad_btnPiDiv4': retVal = Math.PI/4; break;
 // PI/6 case'keyPad_btnPiDiv6': retVal = Math.PI/6; break;
 // e case'keyPad_btnE': retVal = Math.E; break;
 // 1/e case'keyPad_btnInvE': retVal = 1/Math.E; break;
 // SQRT(2) case'keyPad_btnSqrt2': retVal = Math.SQRT2; break;
 // SQRT(3) case'keyPad_btnSqrt3': retVal = Math.sqrt(3); break;
 // CUBE ROOT OF(3) case'keyPad_btnCubeRoot2': retVal = Math.pow(2, 1/3); break;
 // Ln(10) case'keyPad_btnLn10': retVal = Math.LN10; break;
 // base10: Log(e) case'keyPad_btnLgE': retVal = Math.LOG10E; break;
 // Sigmas: defects probability: on scale 0...1// 1 Sigma case'keyPad_btnSigma': retVal = 0.69; break;
 // 3 Sigma case'keyPad_btnSigma3': retVal = 0.007; break;
 // 6 Sigma case'keyPad_btnSigma6': retVal = 3.4 * Math.pow(10, -6); break;
 default: break;
 }
 boolClear = true;
 $(keyPad_UserInput).val(retVal);
 inputBox.focus();
 });
 // BINARY OPERATION KEY *************************************************** $("div#keyPad button.keyPad_btnBinaryOp").click(function () {
 var inBox = $(keyPad_UserInput);
 var newOpCode = 0;
 // validate: string cannot start w/operation symbolif (inBox.val().indexOf('-')> = 0) return;
 if (inBox.val().indexOf('+')> = 0) return;
 if (inBox.val().indexOf('*')> = 0) return;
 if (inBox.val().indexOf('÷')> = 0) return;
 switch (this.id) {
 case'keyPad_btnPlus': newOpCode = 1; break;
 case'keyPad_btnMinus': newOpCode = 2; break;
 case'keyPad_btnMult': newOpCode = 3; break;
 case'keyPad_btnDiv': newOpCode = 4; break;
 case'keyPad_btnYpowX': newOpCode = 5; break;
 case'keyPad_btnPercent':
 if (opCode == 1 || opCode == 2)
 { inBox.val(stackVal * parseFloat(inBox.val())/100); }
 elseif (opCode == 3 || opCode == 4)
 { inBox.val(parseFloat(inBox.val())/100); }
 elsereturn;
 break;
 default: break;
 }
 if (opCode) { oscBinaryOperation(); }
 else { stackVal = parseFloat(inBox.val()); boolClear = true; }
 opCode = newOpCode;
 inBox.focus();
 });
 // BINARY COMPUTATION *****************************************************function oscBinaryOperation() {
 var inBox = $(keyPad_UserInput);
 var x2 = parseFloat(inBox.val());
 switch (opCode) {
 case1: stackVal += x2; break;
 case2: stackVal -= x2; break;
 case3: stackVal *= x2; break;
 case4: stackVal/= x2; break;
 // stack power inputBox case5: stackVal = Math.pow(stackVal, x2); break;
 default: break;
 }
 inBox.val(stackVal);
 boolClear = true;
 inBox.focus();
 }
 // UNARY OPERATIONS ******************************************************* $("button.keyPad_btnUnaryOp").click(function () {
 var inputBox = $(keyPad_UserInput);
 var x = parseFloat(inputBox.val());
 var retVal = oscError;
 switch (this.id) {
 // +/- case'keyPad_btnInverseSign': retVal = -x; break;
 // 1/X case'keyPad_btnInverse': retVal = 1/x; break;
 // X^2 case'keyPad_btnSquare': retVal = x * x; break;
 // SQRT(X) case'keyPad_btnSquareRoot': retVal = Math.sqrt(x); break;
 // X^3 case'keyPad_btnCube': retVal = x * x * x; break;
 // POW (X, 1/3) case'keyPad_btnCubeRoot': retVal = Math.pow(x, 1/3); break;
 // NATURAL LOG case'keyPad_btnLn': retVal = Math.log(x); break;
 // LOG BASE 10 case'keyPad_btnLg': retVal = Math.log(x)/Math.LN10; break;
 // E^(X) case'keyPad_btnExp': retVal = Math.exp(x); break;
 // SIN case'keyPad_btnSin': retVal = Math.sin(x); break;
 // COS case'keyPad_btnCosin': retVal = Math.cos(x); break;
 // TAN case'keyPad_btnTg': retVal = Math.tan(x); break;
 // CTG case'keyPad_btnCtg': retVal = 1/Math.tan(x); break;
 // Arcsin case'keyPad_btnAsin': retVal = Math.asin(x); break;
 // Arccos case'keyPad_btnAcos': retVal = Math.acos(x); break;
 // Arctag case'keyPad_btnAtan': retVal = Math.atan(x); break;
 // Secant case'keyPad_btnSec': retVal = 1/Math.cos(x); break;
 // Cosecant case'keyPad_btnCosec': retVal = 1/Math.sin(x); break;
 // sinh case'keyPad_btnSinH':
 retVal = (Math.pow(Math.E, x) - Math.pow(Math.E, -x))/2; break;
 // cosh case'keyPad_btnCosinH':
 retVal = (Math.pow(Math.E, x) + Math.pow(Math.E, -x))/2; break;
 // coth case'keyPad_btnTgH':
 retVal = (Math.pow(Math.E, x) - Math.pow(Math.E, -x));
 retVal/= (Math.pow(Math.E, x) + Math.pow(Math.E, -x));
 break;
 // Secant hyperbolic case'keyPad_btnSecH':
 retVal = 2/(Math.pow(Math.E, x) + Math.pow(Math.E, -x)); break;
 // Cosecant hyperbolic case'keyPad_btnCosecH':
 retVal = 2/(Math.pow(Math.E, x) - Math.pow(Math.E, -x)); ; break;
 // 1+x case'keyPad_btnOnePlusX': retVal = 1 + x; break;
 // 1-x case'keyPad_btnOneMinusX': retVal = 1 - x; break;
 default: break;
 }
 boolClear = true;
 inputBox.val(retVal);
 inputBox.focus();
 });
 // ************************************************************************// COMMAND BUTTONS: BACKSPACE, CLEAR AND ALL CLEAR $("div#keyPad button.keyPad_btnCommand").click(function () {
 var inBox = $(keyPad_UserInput);
 var mem = $(keyPad_Mem);
 var strInput = inBox.val();
 switch (this.id) {
 // on enter calculate the result, clear opCodecase'keyPad_btnEnter':
 inBox.val(oscBinaryOperation()); opCode = 0; inBox.focus(); return;
 // clear input box (if not empty) or opCode case'keyPad_btnClr':
 if (strInput == strEmpty) { opCode = 0; boolClear = false; }
 else { inBox.val(strEmpty); }
 break;
 // clear the last char if input box is not emptycase'keyPad_btnBack': if (strInput.length> 0) {
 inBox.val(strInput.substring(0, strInput.length - 1)); break;
 }
 // clear all case'keyPad_btnAllClr':
 inBox.val(strEmpty);
 stackVal = strEmpty;
 mem.val(strEmpty);
 opCode = 0;
 break;
 default: break;
 }
 });
 // MEMORY OPERATIONS **************************************************************** $("div#keyPad button.keyPad_btnMemOp").click(function () {
 var inBox = $(keyPad_UserInput);
 var mem = $(keyPad_Mem);
 try {
 memValNumeric = parseFloat(mem.val());
 }
 catch (ex)
 { memVal = strEmpty; mem.val(strEmpty); return; }
 switch (this.id) {
 // move to mem and clear input boxcase'keyPad_btnToMem': mem.val(inBox.val()); inBox.val(strEmpty); break;
 // copy to input box, but do not clear ithe memorycase'keyPad_btnFromMem': inBox.val(mem.val()); break;
 // add to mem case'keyPad_btnMemPlus':
 memVal += parseFloat(inBox.val()); mem.val(memVal); 
 boolClear = true; break;
 // subtract from mem case'keyPad_btnMemMinus':
 memVal -= parseFloat(inBox.val()); mem.val(memVal); 
 boolClear = true; break;
 default: break;
 }
 });
 // CLEAR MEM BOX BY CLICKING ON IT $("div#keyPad input.keyPad_TextBox").click(function () {
 var inBox = $(keyPad_UserInput);
 var mem = $(keyPad_Mem);
 switch (this.id) {
 //case 'keyPad_UserInput': $(keyPad_UserInput).val(strEmpty); break;case'keyPad_Mem': $(keyPad_Mem).val(strEmpty); memVal = 0; break;
 default: break;
 }
 });
})// ***********************************************************************************

历史记录

联机科学计算器 ZENO-5000 作为一个教育项目开始,旨在展示新兴因特网标准的强大能力,即: HTML 5和 CSS 3,伴随着越来越流行的jQuery (。扩展到 JavaScript )。 ZENO被实现为富互联网应用( RIA ),具有非常小的数字。 它不使用任何图形文件: all color和 box shadows 等等 aesthetic的所有美学增强都可以通过 html5/css 3实现,从而大大简化了页面布局,从而大大简化了页面布局,确保了应用程序的快速加载。 项目ZENO深入研究了web应用程序客户端编码技术,主要用于教学目的。 后来,它的工程功能被扩展,导致了相当流行的在线工程计算器"伏特""

计算器软件


CAL  ZEN  计算器  
相关文章