Dynamic Drive DHTML Scripts- DHTML Calculator with receipt output

New Revised CSS Library Forums Web Tools

DHTML Calculator with receipt output

Author: Dynamic Drive

Description: A DHTML calculator that also outputs a "receipt" after each calculation! (Double clicking "c" resets the receipt, pressing "=" multiple times line breaks it)

Demo:

7	8	9	/
4	5	6	*
1	2	3	-
0	+/-	.	+

Directions

Step 1: Save the below "receipt" file into your web page directory. This is file that will be used to output the receipt.

receipt.htm

Step 2: Copy and paste the below into the <body> section of your web page:

Select All
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td><iframe id="receiptroll" width=200px height=150px src="receipt.htm"></iframe></td> </tr> <tr> <td><table border="2" width="200" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border-color:black" onClick="previouskey=event.srcElement.innerText"> <tr> <td width="100%" bgcolor="#FFFFFF" id="result" style="font:bold 20px Verdana;color:black;text-align='right'">0</td> </tr> <tr> <td width="100%" valign="middle" align="center"><table border="0" width="100%" cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white"> <tr> <td width="80%" align="center"><table border="1" width="100%" cellspacing="0" cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white" onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onselectStart="return false" onClick="calculate()" height="82"> <tr> <td width="25%" align="center" height="17">7</td> <td width="25%" align="center" height="17">8</td> <td width="25%" align="center" height="17">9</td> <td width="25%" align="center" height="17">/</td> </tr> <tr> <td width="25%" align="center" height="19">4</td> <td width="25%" align="center" height="19">5</td> <td width="25%" align="center" height="19">6</td> <td width="25%" align="center" height="19">*</td> </tr> <tr> <td width="25%" align="center" height="19">1</td> <td width="25%" align="center" height="19">2</td> <td width="25%" align="center" height="19">3</td> <td width="25%" align="center" height="19">-</td> </tr> <tr> <td width="25%" align="center" height="19">0</td> <td width="25%" align="center" height="19" onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td> <td width="25%" align="center" height="19">.</td> <td width="25%" align="center" height="19">+</td> </tr> </table> </td> <td width="20%"><div align="left"><table border="1" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="100%" style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center" onClick="result.innerText=0;results='';receiptmemory=''" ondblclick="receiptroll.rolls.innerHTML=''" onselectStart="return false">C</td> </tr> </table> </div><div align="left"><table border="1" width="100%" cellspacing="0" cellpadding="0" height="81"> <tr> <td width="100%" style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center" onMouseover="event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">=</td> </tr> </table> </div></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <br> - Double click "C" to clear receipt<br> - Press "=" multiple times to insert line breaks <script language="JavaScript1.2"> /* DHTML Calculator with receipt Script- © Dynamic Drive (http://dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ var results='' var previouskey='' var re=/(\/|\*|\+|-)/ var re2=/(\/|\*|\+|-){2}$/ var re3=/.+(\/|\*|\+|-).+/ var re4=/\d|\./ var re5=/^[^\/\*\+].+\d$/ var re6=/\./ var receiptmemory='' function calculate(){ if (event.srcElement.tagName=="TD"){ if (event.srcElement.innerText.match(re4)&&previouskey=="="){ results='' receiptmemory='' } if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){ if (!results.match(re5)){ result.innerText="Error!" return } results=eval(results) if (results.toString().length>=12&&results.toString().match(re6)) results=results.toString().substring(0,12) result.innerText=results } results+=event.srcElement.innerText receiptmemory+=event.srcElement.innerText if (results.match(re2)){ receiptmemory=results.substring(0,results.length-2)+results.charAt(results.length-1) results=results.substring(0,results.length-2)+results.charAt(results.length-1) } result.innerText=results } } function calculateresult(){ if (receiptmemory==''){ receiptroll.rolls.insertAdjacentHTML("beforeEnd",'<br>') receiptroll.window.scrollBy(0,500) return } if (!results.match(re5)){ result.innerText="Error!" return } results=eval(results) if (results.toString().length>=12&&results.toString().match(re6)) results=results.toString().substring(0,12) result.innerText=results if (receiptmemory.charAt(0)=="/") receiptroll.rolls.insertAdjacentHTML("beforeEnd",'%') else receiptroll.rolls.insertAdjacentHTML("beforeEnd",receiptmemory.charAt(0)) for (i=1;i<receiptmemory.length;i++){ if (receiptmemory.charAt(i).match(re)){ if (receiptmemory.charAt(i)=="/") receiptroll.rolls.insertAdjacentHTML("beforeEnd",'<br>%') else receiptroll.rolls.insertAdjacentHTML("beforeEnd",'<br>'+receiptmemory.charAt(i)) } else receiptroll.rolls.insertAdjacentHTML("beforeEnd",receiptmemory.charAt(i)) } receiptroll.rolls.insertAdjacentHTML("beforeEnd",'<br>') receiptmemory='' receiptroll.rolls.insertAdjacentHTML("beforeEnd",'------<br>'+results+'<br>') receiptroll.window.scrollBy(0,500) } function pn(){ if (result.innerText.charAt(0)!='-') result.innerText=results=receiptmemory='-'+result.innerText else if (result.innerText.charAt(0)=='-') result.innerText=results=receiptmemory=result.innerText*(-1) } </script>