|
|
#1 (permalink) |
|
co-admin
Join Date: Oct 2006
Location: Belgium
Posts: 666
|
Tutorial Name: Simple match calculator
Description: Here is a really simple JavaScript calculator - with just 5 functions! (Add, subtract, multiply, divide, and power) This example can help you see how JavaScript evaluates math functions! Author: !i! Army !i! Difficulty: beginner Details: <!-- TWO STEPS TO INSTALL 5 FUNCTION CALCULATOR: 1. Paste the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Copy this code into the HEAD of your HTML document --> [HTML]<HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function a_plus_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=a+b form.ans.value = c } function a_minus_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=a-b form.ans.value=c } function a_times_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=a*b form.ans.value=c } function a_div_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=a/b form.ans.value = c } function a_pow_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=Math.pow(a, b) form.ans.value = c } // End --> </SCRIPT> </HEAD>[/HTML] <!-- STEP TWO: Put this code into the BODY of your HTML document --> [HTML]<BODY> <CENTER> <FORM name="formx"><input type=text size=4 value=12 name="a"> <input type="button" value=" + " onClick="a_plus_b(this.form)">** <input type="button" value=" - " onClick="a_minus_b(this.form)">** <input type="button" value=" x " onClick="a_times_b(this.form)">** <input type="button" value=" / " onClick="a_div_b(this.form)">** <input type="button" value=" ^ " onClick="a_pow_b(this.form)">** <input type="number" size=4 value=3 name="b"> = <input type "number" value=0 name="ans" size=9> </FORM> </CENTER> </BODY>[/HTML] |
|
|
|
|
|
#2 (permalink) |
|
co-admin
Join Date: Oct 2006
Location: Belgium
Posts: 666
|
And an other simple calculator:
<!-- Copy this code into the BODY of your HTML document --> [HTML]<CENTER> <FORM NAME="Calc"> <! > <! > <TABLE BORDER=4> <TR> <TD> <INPUT TYPE="text" NAME="Input" Size="16"> <br> </TD> </TR> <TR> <TD> <INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="Calc.Input.value += '1'"> <INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="Calc.Input.value += '2'"> <INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value += '3'"> <INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="Calc.Input.value += ' + '"> <br> <INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="Calc.Input.value += '4'"> <INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="Calc.Input.value += '5'"> <INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="Calc.Input.value += '6'"> <INPUT TYPE="button" NAME="minus" VALUE=" - " OnClick="Calc.Input.value += ' - '"> <br> <INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="Calc.Input.value += '7'"> <INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="Calc.Input.value += '8'"> <INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="Calc.Input.value += '9'"> <INPUT TYPE="button" NAME="times" VALUE=" x " OnClick="Calc.Input.value += ' * '"> <br> <INPUT TYPE="button" NAME="clear" VALUE=" c " OnClick="Calc.Input.value = ''"> <INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="Calc.Input.value += '0'"> <INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)"> <INPUT TYPE="button" NAME="div" VALUE=" / " OnClick="Calc.Input.value += ' / '"> <br> </TD> </TR> </TABLE> </FORM> </CENTER>[/HTML] |
|
|
|
|
|
#3 (permalink) |
|
co-admin
Join Date: Oct 2006
Location: Belgium
Posts: 666
|
The simple calculator in Windows Calculator style
<!-- TWO STEPS TO INSTALL WINDOWS CALCULATOR: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> [HTML]<HEAD> <style type="text/css"> <!-- body {font-family: helvetica} p {font-size: 12pt} .red {color: red} .blue {color: blue} --> </style> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var Memory = 0; var Number1 = ""; var Number2 = ""; var NewNumber = "blank"; var opvalue = ""; function Display(displaynumber) { document.calculator.answer.value = displaynumber; } function MemoryClear() { Memory = 0; document.calculator.mem.value = ""; } function MemoryRecall(answer) { if(NewNumber != "blank") { Number2 += answer; } else { Number1 = answer; } NewNumber = "blank"; Display(answer); } function MemorySubtract(answer) { Memory = Memory - eval(answer); } function MemoryAdd(answer) { Memory = Memory + eval(answer); document.calculator.mem.value = " M "; NewNumber = "blank"; } function ClearCalc() { Number1 = ""; Number2 = ""; NewNumber = "blank"; Display(""); } function Backspace(answer) { answerlength = answer.length; answer = answer.substring(0, answerlength - 1); if (Number2 != "") { Number2 = answer.toString(); Display(Number2); } else { Number1 = answer.toString(); Display(Number1); } } function CECalc() { Number2 = ""; NewNumber = "yes"; Display(""); } function CheckNumber(answer) { if(answer == ".") { Number = document.calculator.answer.value; if(Number.indexOf(".") != -1) { answer = ""; } } if(NewNumber == "yes") { Number2 += answer; Display(Number2); } else { if(NewNumber == "blank") { Number1 = answer; Number2 = ""; NewNumber = "no"; } else { Number1 += answer; } Display(Number1); } } function AddButton(x) { if(x == 1) EqualButton(); if(Number2 != "") { Number1 = parseFloat(Number1) + parseFloat(Number2); } NewNumber = "yes"; opvalue = '+'; Display(Number1); } function SubButton(x) { if(x == 1) EqualButton(); if(Number2 != "") { Number1 = parseFloat(Number1) - parseFloat(Number2); } NewNumber = "yes"; opvalue = '-'; Display(Number1); } function MultButton(x) { if(x == 1) EqualButton(); if(Number2 != "") { Number1 = parseFloat(Number1) * parseFloat(Number2); } NewNumber = "yes"; opvalue = '*'; Display(Number1); } function DivButton(x) { if(x == 1) EqualButton(); if(Number2 != "") { Number1 = parseFloat(Number1) / parseFloat(Number2); } NewNumber = "yes"; opvalue = '/'; Display(Number1); } function SqrtButton() { Number1 = Math.sqrt(Number1); NewNumber = "blank"; Display(Number1); } function PercentButton() { if(NewNumber != "blank") { Number2 *= .01; NewNumber = "blank"; Display(Number2); } } function RecipButton() { Number1 = 1/Number1; NewNumber = "blank"; Display(Number1); } function NegateButton() { Number1 = parseFloat(-Number1); NewNumber = "no"; Display(Number1); } function EqualButton() { if(opvalue == '+') AddButton(0); if(opvalue == '-') SubButton(0); if(opvalue == '*') MultButton(0); if(opvalue == '/') DivButton(0); Number2 = ""; opvalue = ""; } // End --> </script> </HEAD>[/HTML] <!-- STEP TWO: Copy this code into the BODY of your HTML document --> [HTML]<center> <form name="calculator"> <table bgcolor="#aaaaaa" width=220> <tr><td> <table bgcolor="#cccccc" border=1> <tr><td> <table border=0 cellpadding=0> <tr><td bgcolor="#000080"><b style="color:white">Calculator</b></td></tr> <tr><td> <table width="100%" border=0> <tr><td colspan=6><input type="text" name="answer" size=30 maxlength=30 onChange="CheckNumber(this.value)"></td></tr> <tr><td colspan=6> <table border=0 cellpadding=0> <tr><td> <input type="text" name="mem" size=3 maxlength=3>*<input type="button" name="backspace" class="red" value="Backspace" onClick="Backspace(document.calculator.answer.valu e); return false;">*<input type="button" name="CE" class="red" value=" CE " onClick="CECalc(); return false;">*<input type="reset" name="C" class="red" value=" C " onClick="ClearCalc(); return false;"> </td></tr> </table> </td></tr> <tr><td><input type="button" name="MC" class="red" value=" MC " onClick="MemoryClear(); return false;"></td> <td><input type="button" name="calc7" class="blue" value=" 7 " onClick="CheckNumber('7'); return false;"></td> <td><input type="button" name="calc8" class="blue" value=" 8 " onClick="CheckNumber('8'); return false;"></td> <td><input type="button" name="calc9" class="blue" value=" 9 " onClick="CheckNumber('9'); return false;"></td> <td><input type="button" name="divide" class="red" value=" / " onClick="DivButton(1); return false;"></td> <td><input type="button" name="sqrt" class="blue" value="sqrt" onClick="SqrtButton(); return false;"></td></tr> <tr><td><input type="button" name="MR" class="red" value=" MR " onClick="MemoryRecall(Memory); return false;"></td> <td><input type="button" name="calc4" class="blue" value=" 4 " onClick="CheckNumber('4'); return false;"></td> <td><input type="button" name="calc5" class="blue" value=" 5 " onClick="CheckNumber('5'); return false;"></td> <td><input type="button" name="calc6" class="blue" value=" 6 " onClick="CheckNumber('6'); return false;"></td> <td><input type="button" name="multiply" class="red" value=" * " onClick="MultButton(1); return false;"></td> <td><input type="button" name="percent" class="blue" value=" % " onClick="PercentButton(); return false;"></td></tr> <tr><td><input type="button" name="MS" class="red" value=" MS " onClick="MemorySubtract(document.calculator.answer .value); return false;"></td> <td><input type="button" name="calc1" class="blue" value=" 1 " onClick="CheckNumber('1'); return false;"></td> <td><input type="button" name="calc2" class="blue" value=" 2 " onClick="CheckNumber('2'); return false;"></td> <td><input type="button" name="calc3" class="blue" value=" 3 " onClick="CheckNumber('3'); return false;"></td> <td><input type="button" name="minus" class="red" value=" - " onClick="SubButton(1); return false;"></td> <td><input type="button" name="recip" class="blue" value="1/x " onClick="RecipButton(); return false;"></td></tr> <tr><td><input type="button" name="Mplus" class="red" value=" M+ " onClick="MemoryAdd(document.calculator.answer.valu e); return false;"></td> <td><input type="button" name="calc0" class="blue" value=" 0 " onClick="CheckNumber('0'); return false;"></td> <td><input type="button" name="negate" class="blue" value="+/- " onClick="NegateButton(); return false;"></td> <td><input type="button" name="dot" class="blue" value=" . " onClick="CheckNumber('.'); return false;"></td> <td><input type="button" name="plus" class="red" value=" + " onClick="AddButton(1); return false;"></td> <td><input type="button" name="equal" class="red" value=" = " onClick="EqualButton(); return false;"></td> </tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table> </form> </center>[/HTML] |
|
|
|
![]() |
| Thread Tools | |
| Display Modes | |
|
|