 |
| Calculator HTML |
Creating and Replacing the Calculator HTML Javascript - This simple Tuturial about how to make Calculator that can then be mounted on Your web as a tool of a simple calculation for your visitors. For those of you who do not want to painstakingly making calculations Formcan use this calculator as alternative, especially on websites html / php static.
Calculator with ways of making the programming code Javascript is not
too difficult, you can copy & Paste the following code and plug it directly in pages / where you want it this calculator to display.
Please copy this code and place the Html Form among <BODY> ...</ BODY> HTML web page:
001 <form name="Keypad" action>
002 <table border="1" bgcolor="#838383">
003 <tr>
004 <td colspan="5" bgcolor="#DFDFDF">
005 <input name = "readout" type = "Text" size = "30" value = "0">
006 </ td>
007 </ tr>
008 <tr>
009 <td bgcolor="#DFDFDF">
010 <input name = "btnSeven" type = "Button" value = "7" onClick = "NumPressed (7)">
011 </ td>
012 <td bgcolor="#DFDFDF">
013 <input name = "btnEight" type = "Button" value = "8" onClick = "NumPressed (8)">
014 </ td>
015 <td bgcolor="#DFDFDF">
016 <input name = "btnNine" type = "Button" value = "9" onClick = "NumPressed (9)">
017 </ td>
018 <td bgcolor="#DFDFDF"> <input name = "btnNeg" type = "Button" value = "+ / -" onClick = "Neg ()"></ td>
019 <td bgcolor="#DFDFDF"> <input name = "btnPercent" type = "Button" value = "%" onClick = "Percent ()"></ td>
020
021 </ tr>
022 <tr>
023 <td bgcolor="#DFDFDF">
024 <input name = "btnFour" type = "Button" value = "4" onClick = "NumPressed (4)">
025 </ td>
026 <td bgcolor="#DFDFDF">
027 <input name = "btnFive" type = "Button" value = "5" onClick = "NumPressed (5)">
028 </ td>
029 <td bgcolor="#DFDFDF">
030 <input name = "btnSix" type = "Button" value = " 6 "onClick =" NumPressed (6) ">
031 </ td>
032 <td bgcolor="#DFDFDF"> <input name = "btnPlus" type = "Button" value = "+"
033 onClick = "Operation ('+')"></ td>
034 <td bgcolor="#DFDFDF"> <input name = "btnMultiply" type = "Button" value = "*"
035 onClick = "Operation ('*')"></ td>
036
037 </ tr>
038 <tr>
039 <td bgcolor="#DFDFDF">
040 <input name = "btnOne" type = "Button" value = " 1 "onClick =" NumPressed (1) ">
041 </ td>
042 <td bgcolor="#DFDFDF">
043 <input name = "btnTwo" type = "Button" value = " 2 "onClick =" NumPressed (2) ">
044 </ td>
045 <td bgcolor="#DFDFDF">
046 <input name = "btnThree" type = "Button" value = "3" onClick = "NumPressed (3)">
047 </ td>
048 <td bgcolor="#DFDFDF"> <input name = "btnMinus" type = "Button" value = "-"
049 onClick = "Operation ('-')"></ td>
050 <td bgcolor="#DFDFDF"> <input name = "btnDivide" type = "Button" value = "/"
051 onClick = "Operation ('/')"></ td>
052
053 </ tr>
054 <tr>
055 <td bgcolor="#DFDFDF">
056 <input name = "btnZero" type = "Button" value = "0" onClick = "NumPressed (0)">
057 </ td>
058 <td bgcolor="#DFDFDF">
059 <input name = "btnDecimal" type = "Button" value = "." onClick = "Decimal ()">
060 </ td>
061 <td colspan="3" bgcolor="#797979">
062 <input name = "btnClear" type = "Button" value = "C" onClick = "Clear ()">
063 <input name = "btnClearEntry" type = "Button" value = "CE" onClick = "ClearEntry ()">
064 <input name = "btnEquals" type = "Button" value = "=" onClick = "Operation ('=')"></ td>
065 </ tr>
066 </ table>
067 </ form>
068 <script LANGUAGE="JavaScript">
069
070 var FKeyPad = document.Keypad;
071 var Accum = 0;
072 FlagNewNum var = false;
073 PendingOp var = "";
074 NumPressed function (Num) {
075 if (FlagNewNum) {Num FKeyPad.ReadOut.value = 076;
077 FlagNewNum = false;
078 }
079 else {
080 if (FKeyPad.ReadOut.value == "0") Num FKeyPad.ReadOut.value = 081;
082 else FKeyPad.ReadOut.value + 083 = Num;
084 }
085 }
086 function Operation (Op) {
087 var = FKeyPad.ReadOut.value readout;
088 if (FlagNewNum & & PendingOp! = "=");
089 else
090 {
091 FlagNewNum = true;
092 if ('+' == PendingOp)
093 Accum + = parseFloat (readout);
094 else if ('-' == PendingOp)
095 Accum -= parseFloat (readout);
096 else if ('/' == PendingOp)
097 Accum / = parseFloat (readout);
098 else if ('*' == PendingOp)
099 Accum *= parseFloat (readout);
100 else
101 Accum = parseFloat (readout);
102 FKeyPad.ReadOut.value = Accum;
103 PendingOp = Op;
104 }
105 }
106 function Decimal () {
107 var curReadOut = FKeyPad.ReadOut.value;
108 if (FlagNewNum) {
109 curReadOut = "0.";
110 FlagNewNum = false;
111 }
112 else
113 {
114 if (curReadOut.indexOf (".") == -1)
115 curReadOut + = ".";
116} CurReadOut FKeyPad.ReadOut.value = 117;
118}
119 ClearEntry function () {
120 FKeyPad.ReadOut.value = "0";
121 FlagNewNum = true;
122 }
123 function Clear () {
124 Accum = 0;
125 PendingOp = "";
126 ClearEntry ();
127 }
128 function Neg () {
129 FKeyPad.ReadOut.value = parseFloat (FKeyPad.ReadOut.value) * -1;
130 }
131 Percent function () {
132 FKeyPad.ReadOut.value = (ParseFloat (FKeyPad.ReadOut.value) / 100) * parseFloat (Accum);
133 }
134 </ script>
Javascript Calculator above you can also plug directly on the CMS website you are using as a widget on your WordPress site, or for users of Joomla can be installed as Module with Copy & Paste the Editor.
Calculator with ways of making the programming code Javascript is not
too difficult, you can copy & Paste the following code and plug it directly in pages / where you want it this calculator to display.
Please copy this code and place the Html Form among <BODY> ...</ BODY> HTML web page:
001 <form name="Keypad" action>
002 <table border="1" bgcolor="#838383">
003 <tr>
004 <td colspan="5" bgcolor="#DFDFDF">
005 <input name = "readout" type = "Text" size = "30" value = "0">
006 </ td>
007 </ tr>
008 <tr>
009 <td bgcolor="#DFDFDF">
010 <input name = "btnSeven" type = "Button" value = "7" onClick = "NumPressed (7)">
011 </ td>
012 <td bgcolor="#DFDFDF">
013 <input name = "btnEight" type = "Button" value = "8" onClick = "NumPressed (8)">
014 </ td>
015 <td bgcolor="#DFDFDF">
016 <input name = "btnNine" type = "Button" value = "9" onClick = "NumPressed (9)">
017 </ td>
018 <td bgcolor="#DFDFDF"> <input name = "btnNeg" type = "Button" value = "+ / -" onClick = "Neg ()"></ td>
019 <td bgcolor="#DFDFDF"> <input name = "btnPercent" type = "Button" value = "%" onClick = "Percent ()"></ td>
020
021 </ tr>
022 <tr>
023 <td bgcolor="#DFDFDF">
024 <input name = "btnFour" type = "Button" value = "4" onClick = "NumPressed (4)">
025 </ td>
026 <td bgcolor="#DFDFDF">
027 <input name = "btnFive" type = "Button" value = "5" onClick = "NumPressed (5)">
028 </ td>
029 <td bgcolor="#DFDFDF">
030 <input name = "btnSix" type = "Button" value = " 6 "onClick =" NumPressed (6) ">
031 </ td>
032 <td bgcolor="#DFDFDF"> <input name = "btnPlus" type = "Button" value = "+"
033 onClick = "Operation ('+')"></ td>
034 <td bgcolor="#DFDFDF"> <input name = "btnMultiply" type = "Button" value = "*"
035 onClick = "Operation ('*')"></ td>
036
037 </ tr>
038 <tr>
039 <td bgcolor="#DFDFDF">
040 <input name = "btnOne" type = "Button" value = " 1 "onClick =" NumPressed (1) ">
041 </ td>
042 <td bgcolor="#DFDFDF">
043 <input name = "btnTwo" type = "Button" value = " 2 "onClick =" NumPressed (2) ">
044 </ td>
045 <td bgcolor="#DFDFDF">
046 <input name = "btnThree" type = "Button" value = "3" onClick = "NumPressed (3)">
047 </ td>
048 <td bgcolor="#DFDFDF"> <input name = "btnMinus" type = "Button" value = "-"
049 onClick = "Operation ('-')"></ td>
050 <td bgcolor="#DFDFDF"> <input name = "btnDivide" type = "Button" value = "/"
051 onClick = "Operation ('/')"></ td>
052
053 </ tr>
054 <tr>
055 <td bgcolor="#DFDFDF">
056 <input name = "btnZero" type = "Button" value = "0" onClick = "NumPressed (0)">
057 </ td>
058 <td bgcolor="#DFDFDF">
059 <input name = "btnDecimal" type = "Button" value = "." onClick = "Decimal ()">
060 </ td>
061 <td colspan="3" bgcolor="#797979">
062 <input name = "btnClear" type = "Button" value = "C" onClick = "Clear ()">
063 <input name = "btnClearEntry" type = "Button" value = "CE" onClick = "ClearEntry ()">
064 <input name = "btnEquals" type = "Button" value = "=" onClick = "Operation ('=')"></ td>
065 </ tr>
066 </ table>
067 </ form>
068 <script LANGUAGE="JavaScript">
069
070 var FKeyPad = document.Keypad;
071 var Accum = 0;
072 FlagNewNum var = false;
073 PendingOp var = "";
074 NumPressed function (Num) {
075 if (FlagNewNum) {Num FKeyPad.ReadOut.value = 076;
077 FlagNewNum = false;
078 }
079 else {
080 if (FKeyPad.ReadOut.value == "0") Num FKeyPad.ReadOut.value = 081;
082 else FKeyPad.ReadOut.value + 083 = Num;
084 }
085 }
086 function Operation (Op) {
087 var = FKeyPad.ReadOut.value readout;
088 if (FlagNewNum & & PendingOp! = "=");
089 else
090 {
091 FlagNewNum = true;
092 if ('+' == PendingOp)
093 Accum + = parseFloat (readout);
094 else if ('-' == PendingOp)
095 Accum -= parseFloat (readout);
096 else if ('/' == PendingOp)
097 Accum / = parseFloat (readout);
098 else if ('*' == PendingOp)
099 Accum *= parseFloat (readout);
100 else
101 Accum = parseFloat (readout);
102 FKeyPad.ReadOut.value = Accum;
103 PendingOp = Op;
104 }
105 }
106 function Decimal () {
107 var curReadOut = FKeyPad.ReadOut.value;
108 if (FlagNewNum) {
109 curReadOut = "0.";
110 FlagNewNum = false;
111 }
112 else
113 {
114 if (curReadOut.indexOf (".") == -1)
115 curReadOut + = ".";
116} CurReadOut FKeyPad.ReadOut.value = 117;
118}
119 ClearEntry function () {
120 FKeyPad.ReadOut.value = "0";
121 FlagNewNum = true;
122 }
123 function Clear () {
124 Accum = 0;
125 PendingOp = "";
126 ClearEntry ();
127 }
128 function Neg () {
129 FKeyPad.ReadOut.value = parseFloat (FKeyPad.ReadOut.value) * -1;
130 }
131 Percent function () {
132 FKeyPad.ReadOut.value = (ParseFloat (FKeyPad.ReadOut.value) / 100) * parseFloat (Accum);
133 }
134 </ script>
Javascript Calculator above you can also plug directly on the CMS website you are using as a widget on your WordPress site, or for users of Joomla can be installed as Module with Copy & Paste the Editor.
No comments:
Post a Comment