Click here to Skip to main content
15,888,521 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table
{
	border-radius:15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculator</title>
<script type="text/javascript">
window.onload=function()
{
	document.calculator.result.focus();
}

var total;
var opr = 0;

function display(val)
{
	
	document.calculator.result.value+= val;
	
}

function txtclear()
{
	document.calculator.result.value='';
}

function operator(opval) 
{
opr = opval;
total = document.calculator.result.value;

}


function equals() 
{
CValue = eval(document.calculator.result.value)
PValue = eval(total)

if(opr =="+") 
{
answer = PValue + CValue;
}
else if(opr =="*") 
{
answer = PValue * CValue;
}
else if(opr =="-") 
{
answer = PValue - CValue;
}
else if(opr =="/") 
{
answer = PValue / CValue;
}
document.calculator.result.value = answer;
}
function box(e)
{
var unicode=e.charCode? e.charCode : e.keyCode
if (unicode!=8 && unicode!=9 && unicode!=13)
	{ 
	 if (unicode<42 || unicode>57) 
	 return false; 
    }
	if(unicode==13)
	{
	 equals();
	 return false;
	}
	if(unicode==43)
	{
		operator("+");
		return false;
	}
	if(unicode==45)
	{
		operator("-");
		return false;
	}
	if(unicode==42)
	{
		operator("*");
		return false;
	}
	if(unicode==47)
	{
		operator("/");
		return false;
	}document.calculator.result.value='';
}

</script>
</head>

<body  bgcolor="#3CACA9">
<form name="calculator">
<table width="248" height="309" border="3" bordercolor="#0099FF" align="center" style="margin-removed100px">
<tr> 
   <td height="29" colspan="5" style="background-color:#09C;">
     <div style="color:#C09; font-weight:bolder; font-size:15px; " align="left">Calculator
     </div>
   </td>
</tr>
<tr>
  <td height="56" colspan="5" style=" background-color:#09C;">
    
      <input type="text" name="result" style="height:100%; width:98.5%; text-align: right; font-family:Lucida Grande; font-size:45px;" onkeypress="return box(event)" />
    
  </td>
</tr>
<tr>
<td width="43" height="52" align="center">
<input type="button"  style="height:100%; width:100%; font-weight:bold" name="one" value="1"  onclick="display('1')" onmouseup="hello()" />
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="two" value="2" onclick="display('2')" onmouseup="hello()" />
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="three" value="3" onclick="display('3')"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="add" value="+" onclick=operator("+") />
</td>
<td width="43" rowspan="4" align="center">
<input type="button"  style="height:225px; width:100%; font-weight:bold" name="evaluate" value="=" onclick=equals() />
</td>
</tr>
<tr>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="four" value="4" onclick="display('4')"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="five" value="5" onclick="display('5')"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="six" value="6" onclick="display('6')"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="subtract" value="-" onclick=operator("-") />
</td>
</tr>
<tr>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="seven" value="7" onclick="display('7')"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="eight" value="8" onclick="display('8')"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="nine" value="9" onclick="display('9')"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="multiply" value="*" onclick=operator("*") />
</td>
</tr>
<tr>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="dot" value="." onclick="display('.')"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="zero" value="0" onclick="display('0')"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="clear" value="C" onclick="txtclear()"/>
</td>
<td width="43" height="52" align="center">
<input type="button" style="height:100%; width:100%; font-weight:bold" name="divide" value="/" onclick=operator("/") />
</td>
</tr>

</table>
</form>
</body>
</html>
Posted
Updated 30-Jan-12 23:55pm
v2

 
Share this answer
 
Do you call it a calculator?

This is a calculator: http://sakryukov.org/freeware/calculator/[^].

—SA
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900