Go Back   Internet Business Forums > Design & Development

Reply
 
Thread Tools Display Modes
Old 18-11-2006, 05:13 PM   #1 (permalink)
co-admin
 
army's Avatar
 
Join Date: Oct 2006
Location: Belgium
Posts: 666
Default [ SCRIPT ] Simple match calculator

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]
army is offline   Reply With Quote
Old 18-11-2006, 05:27 PM   #2 (permalink)
co-admin
 
army's Avatar
 
Join Date: Oct 2006
Location: Belgium
Posts: 666
Default Re: [ SCRIPT ] Simple match calculator

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]
army is offline   Reply With Quote
Old 18-11-2006, 05:42 PM   #3 (permalink)
co-admin
 
army's Avatar
 
Join Date: Oct 2006
Location: Belgium
Posts: 666
Default Re: [ SCRIPT ] Simple match calculator

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]
army is offline   Reply With Quote
Old 21-11-2006, 01:52 AM   #4 (permalink)
Senior Member
 
Join Date: Nov 2006
Posts: 225
Default Re: [ SCRIPT ] Simple match calculator

thanks man!! maybe ill use these codes in one of my site, thanks a lot!
roy77
roy77 is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


All times are GMT +1. The time now is 08:23 AM.


Powered by vBulletin® Version 3.7.3
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.1.0 ©2007, Crawlability, Inc.