JavaScript Calculator
JavaScript calculator allow you to enable calculation tool on the web. This calculator support basic operation such as division(-), multiplication (*), substraction(-), addition(+), negation(+/-), and percentage(%). This calculator can be enhanced for sure by adding more advanced mathematical operations.
Platform
This script can be run well using Mozilla Firefox (any version), Internet Explorer (any version), Opera and Fast Browser.
Source Code
[html]<html>
<head>
<title>Javascript Calculator</title>
<script language="JavaScript">
// By : Isusx Programming Corner
// URL : http://isusx.com
var buffer = 0;
var is_new_input = false;
var current_opr = "";
function process(obj){
var key = obj.value;
switch(key){
case "9":
case "8":
case "7":
case "6":
case "5":
case "4":
case "3":
case "2":
case "1":
case "0":
process_num_key (key);
break;
case "+":
case "-":
case "*":
case "/":
case "=":
process_opr_key (key);
break;
case ".":
decimal_format ();
break;
case "CE":
clear_entry ();
break;
case "C":
clear ();
break;
case "+/-":
negation ();
break;
case "%":
percent ();
break;
}
}
function get_monitor_val(){
return txt_monitor.value;
}
function set_monitor_val(val){
txt_monitor.value = val;
}
function process_num_key (num) {
num = parseInt(num);
if (is_new_input){
set_monitor_val(num);
is_new_input = false;
}else{
var tmp = get_monitor_val();
if (tmp == "0")
set_monitor_val(num);
else
set_monitor_val(tmp + num);
}
}
function process_opr_key (opr) {
var tmp = get_monitor_val();
if (is_new_input && current_opr != "=");
else {
is_new_input = true;
if ( ‘+’ == current_opr )
buffer += parseFloat(tmp);
else if ( ‘-’ == current_opr )
buffer -= parseFloat(tmp);
else if ( ‘/’ == current_opr )
buffer /= parseFloat(tmp);
else if ( ‘*’ == current_opr )
buffer *= parseFloat(tmp);
else
buffer = parseFloat(tmp);
set_monitor_val(buffer);
current_opr = opr;
}
}
function decimal_format () {
var tmp = get_monitor_val();
if (is_new_input) {
tmp = "0.";
is_new_input = false;
} else {
if (tmp.indexOf(".") == -1)
tmp += ".";
}
set_monitor_val(tmp);
}
function clear_entry () {
set_monitor_val("0");
is_new_input = true;
}
function clear () {
buffer = 0;
current_opr = "";
clear_entry();
}
function negation () {
set_monitor_val (parseFloat(get_monitor_val()) * -1);
}
function percent () {
var tmp = parseFloat(get_monitor_val());
set_monitor_val (tmp / 100) * parseFloat(buffer);
}
</script>
<style>
.opr_button{
width:30px;
font:verdana;
font-size:9px;
font-weight:bold
}
.num_button{
width:50px;
font:verdana;
font-size:9px;
font-weight:bold
}
.txt_monitor{
width:150px;
font:verdana;
font-size:11px;
text-align:right
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="1">
<tr>
<td colspan="3" align="middle">
<input type="text" id="txt_monitor" maxlength="24"
value="0" class="txt_monitor">
</td>
<td></td>
<td width="30px">
<input type="button" value="C" onclick="process(this)"
class="opr_button">
</td>
<td width="30px">
<input type="button" value="CE" onclick="process(this)"
class="opr_button">
</td>
</tr>
<tr>
<td width="30px">
<input type="button" value="7" onclick="process(this)"
class="num_button">
</td>
<td width="30px">
<input type="button" value="8" onClick="process(this)"
class="num_button">
</td>
<td width="30px">
<input type="Button" value="9" onClick="process(this)"
class="num_button">
</td>
<td width="2px"></td>
<td width="30px">
<input type="Button" value="+/-" onClick="process(this)"
class="opr_button">
</td>
<td width="30px">
<input type="Button" value="%" onClick="process(this)"
class="opr_button">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="process(this)"
class="num_button">
</td>
<td>
<input type="button" value="5" onClick="process(this)"
class="num_button">
</td>
<td>
<input type="button" value="6" onClick="process(this)"
class="num_button">
</td>
<td></td>
<td>
<input type="button" value="+" onClick="process(this)"
class="opr_button">
</td>
<td>
<input type="button" value="-" onClick="process(this)"
class="opr_button">
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="process(this)"
class="num_button">
</td>
<td>
<input type="button" value="2" onClick="process(this)"
class="num_button">
</td>
<td>
<input type="button" value="3" onClick="process(this)"
class="num_button">
</td>
<td></td>
<td>
<input type="button" value="*" onClick="process(this)"
class="opr_button">
</td>
<td>
<input type="button" value="/" onClick="process(this)"
class="opr_button">
</td>
</tr>
<tr>
<td>
<input type="button" value="0" onClick="process(this)"
class="num_button">
</td>
<td>
<input type="button" value="." onClick="process(this)"
class="num_button">
</td>
<td colspan="3"></td>
<td>
<input type="button" value="=" onClick="process(this)"
class="opr_button">
</td>
</tr>
</table>
</body>
</html>[/html]
Copyright Note
This script is free to use but please do not remove the comment in the script.
Related Links
About Calendar
Javascript Source
About HTML element
About JavaScript
