JavaScript DHTML/Page Components/Calculator
Содержание
A JavaScript Calculator
<source lang="html4strict">
/* Mastering JavaScript, Premium Edition by James Jaworski ISBN:078212819X Publisher Sybex CopyRight 2001
- /
<HTML> <HEAD> <TITLE>Doing Math</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"></SCRIPT>
Doing Math
<FORM NAME="calculator">
| <INPUT TYPE="TEXT" NAME="total" VALUE="0" SIZE="44"> | |||||
| <INPUT TYPE="BUTTON" NAME="n0" VALUE=" 0 " ONCLICK="addDigit(0)"> | <INPUT TYPE="BUTTON" NAME="n1" VALUE=" 1 " ONCLICK="addDigit(1)"> | <INPUT TYPE="BUTTON" NAME="n2" VALUE=" 2 " ONCLICK="addDigit(2)"> | <INPUT TYPE="BUTTON" NAME="equals" VALUE=" = " ONCLICK="calc()"> | <INPUT TYPE="BUTTON" NAME="clearField" VALUE=" Clear " ONCLICK="clearDisplay()"> | <INPUT TYPE="BUTTON" NAME="ln2" VALUE=" ln2 " ONCLICK="setTo(Math.LN2)"> |
| <INPUT TYPE="BUTTON" NAME="n3" VALUE=" 3 " ONCLICK="addDigit(3)"> | <INPUT TYPE="BUTTON" NAME="n4" VALUE=" 4 " ONCLICK="addDigit(4)"> | <INPUT TYPE="BUTTON" NAME="n5" VALUE=" 5 " ONCLICK="addDigit(5)"> | <INPUT TYPE="BUTTON" NAME="sign" VALUE=" +/- " ONCLICK="changeSign()"> | <INPUT TYPE="BUTTON" NAME="sqrt2" VALUE=" sqrt(2) " ONCLICK="setTo(Math.SQRT2)"> | <INPUT TYPE="BUTTON" NAME="ln10" VALUE=" ln10 " ONCLICK="setTo(Math.LN10)"> |
| <INPUT TYPE="BUTTON" NAME="n6" VALUE=" 6 " ONCLICK="addDigit(6)"> | <INPUT TYPE="BUTTON" NAME="n7" VALUE=" 7 " ONCLICK="addDigit(7)"> | <INPUT TYPE="BUTTON" NAME="n8" VALUE=" 8 " ONCLICK="addDigit(8)"> | <INPUT TYPE="BUTTON" NAME="pi" VALUE=" pi " ONCLICK="setTo(Math.PI)"> | <INPUT TYPE="BUTTON" NAME="sqrt12" VALUE="sqrt(1/2) " ONCLICK="setTo(Math.SQRT1_2)"> | <INPUT TYPE="BUTTON" NAME="log2e" VALUE=" log2(e) " ONCLICK="setTo(Math.LOG2E)"> |
| <INPUT TYPE="BUTTON" NAME="n9" VALUE=" 9 " ONCLICK="addDigit(9)"> | <INPUT TYPE="BUTTON" NAME="decimal" VALUE=" . " ONCLICK="addDecimalPoint()"> | <INPUT TYPE="BUTTON" NAME="plus" VALUE=" + " ONCLICK="performOp("+")"> | <INPUT TYPE="BUTTON" NAME="e" VALUE=" e " ONCLICK="setTo(Math.E)"> | <INPUT TYPE="BUTTON" NAME="random" VALUE="Random" ONCLICK="setTo(Math.random())"> | <INPUT TYPE="BUTTON" NAME="log10e" VALUE="log10(e) " ONCLICK="setTo(Math.LOG10E)"> |
| <INPUT TYPE="BUTTON" NAME="minus" VALUE=" - " ONCLICK="performOp("-")"> | <INPUT TYPE="BUTTON" NAME="multiply" VALUE=" X " ONCLICK="performOp("*")"> | <INPUT TYPE="BUTTON" NAME="divide" VALUE=" / " ONCLICK="performOp("/")"> | Functions:
<SELECT NAME="functions" SIZE="1"> <OPTION VALUE="abs" SELECTED="SELECTED">abs(x)</OPTION> <OPTION VALUE="acos">acos(x)</OPTION> <OPTION VALUE="asin">asin(x)</OPTION> <OPTION VALUE="atan">atan(x)</OPTION> <OPTION VALUE="ceil">ceil(x)</OPTION> <OPTION VALUE="cos">cos(x)</OPTION> <OPTION VALUE="exp">exp(x)</OPTION> <OPTION VALUE="floor">floor(x)</OPTION> <OPTION VALUE="log">log(x)</OPTION> <OPTION VALUE="sin">sin(x)</OPTION> <OPTION VALUE="sqrt">sqrt(x)</OPTION> <OPTION VALUE="tan">tan(x)</OPTION> </SELECT> <INPUT TYPE="BUTTON" NAME="apply" VALUE="Apply" onClick="applyFunction()"> | ||
</FORM> </BODY> </HTML>
</source>
JavaScript Calculator - sCal
<source lang="html4strict">
<HEAD> <SCRIPT LANGUAGE="JavaScript">
</script> </HEAD>
<BODY onLoad="setDefaultMenus()">
<form name="sCal">
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</body> </html>
</source>
JavaScript (sCal-05m) Calculator
<source lang="html4strict">
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
</script> </HEAD>
<BODY>
<form name="sCal">
| <large> JavaScript Calculator . sCal-1ce</large> | |||||
| Place | Constants, Functions | Apply | |||
| <input type="button" value="JS" onClick="xPlusEq(document.sCal.FSET1.value)"> | <SELECT name="FSET1">
<option selected value="Math.PI">[convert, constant] . Pi .</option> <option value="x/25.4">x}[length] . . mm -> inch</option> <option value="25.4*x">x}[length] . . inch -> mm</option> <option value="x/0.3048">x}[length] meter -> feet</option> <option value="0.3048*x">x}[length] feet -> meter</option> <option value="x/5280">x}[length] . . feet -> mile</option> <option value="0.62137*x">x}[len.] kilometer->mile</option> <option value="1.609344*x">x}[len.] mile->kilometer</option> <option value="10.76391*x">x}[area] meter² -> feet²</option> <option value="0.092903*x">x}[area] feet² -> meter²</option> <option value="x/43560">x}[area] . . feet² ->acre</option> <option value="43560*x">x}[area] . . acre ->feet²</option> <option value="2.471054*x">x}[area] hectare->acre</option> <option value="0.404686*x">x}[area] acre->hectare</option> <option value="x/640">x}[area] . . acre-> mile²</option> <option value="35.314725*x">x}[volume] meter³ -> ft³</option> <option value="0.0283168*x">x}[volume] ft³ -> meter³</option> <option value="7.4805*x">x}[volume] ft³ -> gallon</option> <option value="0.764555*x">x}[vol.] . . yd³ ->meter³</option> <option value="4.44822*x">x}[force] lb(f)->Newton</option> <option value="0.45359*x">x}[mass] . lb.US -> kg</option> <option value="9*x/5+32">x}[temperature] C°->F°</option> <option value="5*(x-32)/9">x}[temperature] F°->C°</option><option value="x-273.15">x}[temperature] C°->K°</option></select> |
<input type="button" Value="Do" onClick="Xwork(document.sCal.FSET1.value)"> | |||
| <input type="button" value="JS" onClick="xPlusEq(document.sCal.FSET2.value)"> | <SELECT name="FSET2">
<option selected value="Math.pow(x,2)">[power, trig, log] . . . (x)²</option>
<option value="for(j=x;j>2;j--){x*=j-1;} //x<2 undefined">x}pgm.eg.} factorial . x!</option>
<option value="Math.round(x*10000)/10000">x} 4-dec.places: round</option>
<option value="Math.sin(x*Math.PI/180)">x}opp/hyp, deg) sin(x°)</option>
<option value="Math.cos(x*Math.PI/180)">x}adj/hyp, deg) cos(x°)</option>
<option value="Math.tan(x*Math.PI/180)">x}opp/adj, deg) tan(x°)</option>
<option value="Math.PI/180 *x">x} . degrees to radians</option>
<option value="180/Math.PI *x">x} . radians to degrees</option>
<option value="Math.asin(x)*180/Math.PI">x}for deg.) . . arc sin(x)</option>
<option value="Math.acos(x)*180/Math.PI">x}for deg.) . . arc cos(x)</option>
<option value="Math.atan(x)*180/Math.PI">x}for deg.) . . arc tan(x)</option>
<option value="Math.log(x)">x} natural log (base e)</option>
<option value="Math.exp(x)">x}exponentiation: e^x</option>
<option value="Math.log(x)*Math.LOG10E">x}common log(bse10)</option>
<option value="Math.pow(10,x)">x}anti-log(com"n)10^x</option>
<option value="Math.E">base of natural logs,e</option>
<option value="Math.LOG10E">common log (10) of e</option>
<option value="Math.random()">Random Num. (0 to 1)</option></select> |
<input type="button" Value="Do" onClick="Xwork(document.sCal.FSET2.value)"> | |||
| <input type="button" value="JS" onClick="xPlusEq(document.sCal.FSET3.value)"> | <SELECT name="FSET3">
<option selected value="Math.sqrt(x)">[ - other - ] . sq.root (x)½</option> <option value="Actual bank values can vary on pay date vs. interest posting, etc."> s} . . . . FINANCE</option> <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); P=(/*Principal $*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: 9%APR (=0.75%/mo.) for 36mo, repay $10000 @ $318/mo.*/ x="REPAY/PERIOD $"+ Mr(P*i*y/(y-1),2)"> *}Cap.Recov: loan pay</option> <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); P=(/*$ banked*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: $1000 invested @9%APR for 10 yrs. becomes $2367*/ x="TOTAL AFTER "+N+ " PERIODS $"+ Mr(P*y,2)"> *} sgl.pay: Comp.Amt.</option> <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); R=(/*bank $/per*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: @9%APR, $1000 invested/year for 10yrs, yields $15193*/ x="TOTAL AFTER "+N+ " PERIODS $"+ Mr(R*(y-1)/i,2)"> *} unif.pay: Comp.Amt.</option> <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); S=(/*Needed $ in n-periods*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: @9%APR, $1000 needed in 10yrs; bank $422 now.*/ x="BANK NOW $"+ Mr(S/y,2)"> *} sgl.pay: Pres.Worth</option> <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); R=(/*Needed $/period*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: @9%APR, $1000 needed annually for 10yrs; bank $6418 now*/ x="BANK NOW $"+ Mr(R*(y-1)/(y*i),2)"> *}unif.pay: Pres.Worth</option> <option value="I=(/*int.rate%/per.*/ ); N=(/*no. of periods*/ ); S=(/*Needed $ in n-periods*/ ); /*CLICK[ = ]*/ var i=I/100; var y=Math.pow(1+i,N); /*eg: @9%APR, $1000 needed in 10yrs; bank $66 annually*/ x="BANK/PERIOD $"+ Mr(S*i/(y-1),2)"> *} unif.pay: Sink.Fund</option> <option value="Only for simplest cases with knowledge of assumptions, coefficients, etc."> s} . . OPEN CHAN. Q</option> <option value="3.1*(/*weirLength,ft*/ )*Math.pow((/*head,ft*/ ),1.5)"> *}BrdCrest Weir, Q,cfs</option> <option value="h=(/*Orifice height,ft*/ ); 0.6*(/*width, ft*/ )*h*Math.sqrt(((/*total Head, ft*/ )-h/2)*2*g)"> *}Rectang.Orifice Q,cfs</option> <option value="d=(/*Orif.Dia,ft*/ ); Math.sqrt(((/*total Head,ft*/ )-d/2)*2*g)*0.6*3.1416*d*d/4"> *} Circular Orifice Q,cfs</option> <option value="d=(/*Pipe Dia. ft*/ ); s=(/*long.slope,%*/ ); N=(/*Manning n*/ ); /*CLICK[ = ]*/ a=3.1416*d*d/4; m="A, s.f="+a; Om(); 1.486*Math.sqrt(s/100)*Math.pow(d/4,0.667)*a/N"> *} Pipe normal flo Q,cfs</option> <option value="l=(/*left.side.sl:1*/ ); b=(/*bottom width,ft*/ ); r=(/*rt.side.sl:1*/ ); y=(/*flow depth,ft*/ ); s=(/*long.slope,%*/ ); N=(/*Manning n*/ ); /*CLICK[ = ]*/ var tw=l*y+b+r*y; a=y*(tw+b)/2; var wp=Math.sqrt(l*y*l*y+y*y)+b+Math.sqrt(r*y*r*y+y*y); v=1.486*Math.sqrt(s/100)*Math.pow(a/wp,0.667)/N; f=v/Math.sqrt(g*a/tw); x="top wid.ft=" +Mr(tw,1) +" area s.f.=" +Mr(a,1) +" Froude#=" +Mr(f,2) +" Vel.f/s=" + Mr(v,1) +" Q, cfs=" +Mr(a*v,1); // Note: if side.slope=0, vertical wall; if bottom width=0, V-ditch; velocity shown in memory box"> *} \_/ Channel norm. Q</option> <option value=""> s} . . . MISC. </option> <option value="d=(/*BEAM depth,in*/ ); b=(/*width,in*/ ); l=(/*length,ft*/ ); w=(/*unif.load,lb/ft*/ ); h=(/*max.deflect,in*/ ); /*CLICK[ = ]*/ a=b*d; S=a*d/6; I=S*d/2; M=w*l*l*12/8; x="A,sq.in="+Mr(a,3)+" I,in4="+Mr(I,2)+" M.max,in.lb="+Mr(M,-1)+" f.b.min,psi="+Mr(M/S,-1)+" E.min,psi="+Mr(5*M*l*l*144/(48*h*I),-3); //etc. eg. shear f.v=V/A esp. short beams"> *} Simple Rect. Beam</option> <option value="">*}</option> <option value="">*}</option><option value="186300">light speed c, mile/sec</option></select> |
<input type="button" Value="Do" onClick="Xwork(document.sCal.FSET3.value)"> | |||
| Display - x | |||||
| <TextArea name="IOx" rows=4 COLS=26></TextArea> | |||||
| Memory - m | |||||
| <input type="button" Value="x›m" onClick="XtoM()"> | <input type="button" Value="m›x" onClick="MtoX()"> | <input type="text" name="IOm" size=8> | <input type="button" Value=" m+" onClick="Mplus()"> | <input type="button" Value="mc" onClick="Mclear()"> | |
| . | |||||
| <input type="button" Value=" 7 " onClick="xPlusEq(7)"> | <input type="button" Value=" 8 " onClick="xPlusEq(8)"> | <input type="button" Value=" 9 " onClick="xPlusEq(9)"> | <input type="button" Value=" ( " onClick="xPlusEq("(")"> | <input type="button" Value=" ) " onClick="xPlusEq(")")"> | <input type="button" Value=" C " onClick="Clear()"> |
| <input type="button" Value=" 4 " onClick="xPlusEq(4)"> | <input type="button" Value=" 5 " onClick="xPlusEq(5)"> | <input type="button" Value=" 6 " onClick="xPlusEq(6)"> | <input type="button" Value=" * " onClick="xPlusEq("*")"> | <input type="button" Value=" / " onClick="xPlusEq("/")"> | <input type="button" Value=" < " onClick="BkSpace()"> |
| <input type="button" Value=" 1 " onClick="xPlusEq(1)"> | <input type="button" Value=" 2 " onClick="xPlusEq(2)"> | <input type="button" Value=" 3 " onClick="xPlusEq(3)"> | <input type="button" Value=" + " onClick="xPlusEq("+")"> | <input type="button" Value=" - " onClick="xPlusEq("-")"> | <input type="button" Value=" ^ " onClick="xPlusEq("^")"> |
| <input type="button" Value=" 0 " onClick="xPlusEq("0")"> | <input type="button" Value=" • " onClick="xPlusEq(".")"> | <input type="button" Value=" +/- " onClick="xMultEq("-1")"> | <input type="button" Value="1/x " onClick="recip()"> | <input type="button" Value=". . = . ." onClick="xEval()"> | |
| Civil Engr. vers. r.m.03 | |||||
</form>
| Notes on JavaScript Calculator - sCal |
Operation on lowest level = a simple calculator: click on-screen buttons or use keyboard -- best for inserting values or programming. On a higher level, some functions are available as buttons or from drop-down select menus: designated by x}. These operate directly on entire value in x-display, not just last term, when the [Do] clicked. (The [^] takes all values left of it as base, all to the right as exponent.) Trade values in and out of Memory to control. -Experiment-. Test on known data. |
</body> </html>
</source>
Reverse Polish Notation Calculator
<source lang="html4strict">
<html>
<head> <title>rpnjcalc a javascript RPN Calculator</title>
<style type="text/css"> input.btn {align:center;color:#000000;width:50;height:22;vertical-align:middle;font-size:12} input.bigbtn {align:center;color:#000000;width:100;height:22;vertical-align:middle;font-size:12} </style> <script type="text/javascript" language="JavaScript">
</script>
</head> <body>
Reverse Polish Notation Calculator
This calculator uses postfix notation also known as Reverse Polish Notation (RPN). This notation has many advantages over Algebraic notation. One advantage is that you can calculate even complicated terms without braces.
An example: Suppose you want calculate 5 * (3 + 4)
Press the following keys on the calculator: 5, enter, 3,
enter. The 3 and 5 did go into the calculator"s memory, the
stack. Now you type 4 and press + to add. After this you just
press * to multiply.
You can either operate this calculator with mouse clicks or you can use the keyboard. However some web-browsers have keyboard shortcuts which may conflict with the keys used by this calculator. Therefore you need to place the mouse over the text area below as this avoids the browsers keyboard shortcuts to take effect. The keyboard interface was tested with Mozilla, MS IE and Opera. It does not work with Netscape 4.
rpnjcalc comes with a small manual which you can find here: <a href="rpnjcalc-help-0.1.html">rpnjcalc-help-0.1.html</a>
<form name="rpncal" method="post">
| rpnjcalc version 1.6 | ||||||
<input type="button" value="stoX"
onclick="sto4(this.form)"> <input name="mem4" value="0"
size="14"> <input type="button" value="rclX" onclick=
"rcl4(this.form)"> |
C:<input name= "stack3" value="0" size="23" readonly> | |||||
<input type="button" value="stoX"
onclick="sto3(this.form)"> <input name="mem3" value="0"
size="14"> <input type="button" value="rclX" onclick=
"rcl3(this.form)"> |
B:<input name= "stack2" value="0" size="23" readonly> | |||||
<input type="button" value="stoX"
onclick="sto2(this.form)"> <input name="mem2" value="0"
size="14"> <input type="button" value="rclX" onclick=
"rcl2(this.form)"> |
A:<input name= "stack1" value="0" size="23" readonly> | |||||
<input type="button" value="stoX"
onclick="sto1(this.form)"> <input name="mem1" value="0"
size="14"> <input type="button" value="rclX" onclick=
"rcl1(this.form)"> |
Y:<input name="stack" value="0" size="23" readonly> | |||||
| <input type="button" class="btn" value="undo" onclick= "undoall(this.form)"> | <input type="button" class="btn" value="lastX" onclick= "lastx(this.form)"> | <input type="button" class="btn" value="swap" onclick= "swapxy(this.form)"> | X:<input name= "display" value="0" size="23"> | |||
| <input type="button" class="btn" value=" sin " onclick= "sin(this.form)"> | <input type="button" class="btn" value="asin " onclick= "asin(this.form)"> | <input type="button" class="btn" value=" PI " onclick= "pix(this.form)"> | <input type="button" class="btn" value=" 1/x " onclick= "onebyx(this.form)"> | <input type="button" class="btn" value=" y^x " onclick= "powxy(this.form)"> | <input type="button" class="btn" value=" log " onclick= "log10(this.form)"> | <input type="button" class="btn" value=" E " onclick= "addChar(this.form, "E")"> |
| <input type="button" class="btn" value=" cos " onclick= "cos(this.form)"> | <input type="button" class="btn" value="acos" onclick= "acos(this.form)"> | <input type="button" class="btn" value=" 7 " onclick= "addChar(this.form, "7")"> | <input type="button" class="btn" value=" 8 " onclick= "addChar(this.form, "8")"> | <input type="button" class="btn" value=" 9 " onclick= "addChar(this.form, "9")"> | <input type="button" class="btn" value=" / " onclick= "divide(this.form)"> | <input type="button" class="btn" value=" E- " onclick= "addChar(this.form, "E-")"> |
| <input type="button" class="btn" value=" tan " onclick= "tan(this.form)"> | <input type="button" class="btn" value="atan " onclick= "atan(this.form)"> | <input type="button" class="btn" value=" 4 " onclick= "addChar(this.form, "4")"> | <input type="button" class="btn" value=" 5 " onclick= "addChar(this.form, "5")"> | <input type="button" class="btn" value=" 6 " onclick= "addChar(this.form, "6")"> | <input type="button" class="btn" value=" * " onclick= "multiply(this.form)"> | <input type="button" class="btn" value=" x! " onclick= "factx(this.form)"> |
| <input type="button" class="btn" value=" ^2 " onclick= "square(this.form)"> | <input type="button" class="btn" value=" sqrt " onclick= "sqrtx(this.form)"> | <input type="button" class="btn" value=" 1 " onclick= "addChar(this.form, "1")"> | <input type="button" class="btn" value=" 2 " onclick= "addChar(this.form, "2")"> | <input type="button" class="btn" value=" 3 " onclick= "addChar(this.form, "3")"> | <input type="button" class="btn" value=" - " onclick= "subtract(this.form)"> | |
| <input type="button" class="btn" value=" e^x " onclick= "expx(this.form)"> | <input type="button" class="btn" value=" ln " onclick= "lnx(this.form)"> | <input type="button" class="btn" value=" 0 " onclick= "addChar(this.form, "0")"> | <input type="button" class="btn" value=" . " onclick= "addChar(this.form, ".")"> | <input type="button" class="btn" value=" +/- " onclick= "changeSign(this.form)"> | <input type="button" class="btn" value=" + " onclick= "add(this.form)"> | |
| mode: | <input type="button" class="btn" name="mode" value=" rad " onclick="changedegrad(this)"> | <input type="button" class="btn" value=" C " onclick= "cx(this.form)"> | <input type="button" class="btn" value=" <- " onclick= "deleteChar(this.form)"> | <input type="button" class="btn" value=" pop " onclick= "popStackDisplay(this.form)"> | <input type="button" class="bigbtn" value=" Enter " name=" enter " onclick="enterx(this.form)"> | |
</form>
<form name="kbdfrom" onkeypress="javascript:chkkey(event)">
<textarea cols="76" rows="4" name="dummy" readonly
onclick="this.style.backgroundColor="#BDBDBD"" onmouseout=
"this.style.backgroundColor="#FFFFFF"">
For keyboard usage leave mouse cursor on this field and
click once. Keys: 0-9.=numbers, return=enter, c=+/-, C=clear,
s=swap, d=<-, p=pop, ^=y^x, l=ln, e=e^x, r=1/x
</textarea>
</form>
rpnjcalc was written by Guido Socher, guido at linuxfocus dot org, Copyright: GPL </body>
</html>
</source>
