Membuat Kalkulator dengan Javascript
11/05/2010 15:21Hoooo....hooo...capek sekali kuliah tiap hari, tapi tetap meluangkan waktu untuk memodifikasi web ini..heee.. Oke...tidak usah panjang lebar lagi pada kesempatan kali ini saya akan berbagi source-code mengenai cara membuat Kalkulator sederhana tapi menarik.
Sebelumnya anda harus mengerti terlebih dahulu tentang HTML dan Javascript karena Kalkulator ini menggunakan code Javascript. Tapi itu tak jadi masalah yang penting anda mau mencoba itu saja sudah cukup qok.
Baiklah langsung saja copy code di bawah ini pada sebuah editor Notepad atau editor apa saja yang mendukung untuk menulis code ini, copy code dari tag yg bertuliskan <html>...</html>
------------> copy code Javascript dibawah ini <------------
<html>
<head>
<title>JavaScript Kalkulator</title>
<h2 align="center"><i>Tampilan Kalkulator Sederhana</br>By Iwan cheboxz</br></h2></i>
<script type="text/javascript">
<!--
function tampil(f,x)
{
if(f.value=="0"||f.value=="E"||f.value=="Infinity")
{
f.value = x;
}
else
{
f.value += x;
}
}
function balik(f)
{
if (f.value.substring(0,1)="-")
{
f.value = f.value.substring(1,f.value.length);
}
else
{
f.value="-" + f.value;
}
}
function proses(f)
{
try
{
f.value=eval(f.value)
}
catch(er)
{
f.value="E"
}
}
//-->
</script>
</head>
<body>
<CENTER>
<!-- This script and many more are available online free at -->
<! >
[<a href="/"
onmouseover="document.bgColor='green'">Green</a>]
[<a href="/"
onmouseover="document.bgColor='greem'">Bright Green</a>]
[<a href="/"
onmouseover="document.bgColor='seagreen'">Sea Green</a>]
[<a href="/"
onmouseover="document.bgColor='red'">Red</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='magenta'">Magenta</a>]
[<a href="/"
onmouseover="document.bgColor='fusia'">Fusia</a>]
[<a href="/"
onmouseover="document.bgColor='pink'">Pink</a>]
[<a href="/"
onmouseover="document.bgColor='purple'">Purple</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='navy'">Navy</a>]
[<a href="/"
onmouseover="document.bgColor='blue'">Blue</a>]
[<a href="/"
onmouseover="document.bgColor='royalblue'">Royal Blue</a>]
[<a href="/"
onmouseover="document.bgColor='Skyblue'">Sky Blue</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='yellow'">Yellow</a>]
[<a href="/"
onmouseover="document.bgColor='brown'">Brown</a>]
[<a href="/"
onmouseover="document.bgColor='almond'">Almond</a>]
[<a href="/"
onmouseover="document.bgColor='white'">White</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='black'">Black</a>]
[<a href="/"
onmouseover="document.bgColor='coral'">Coral</a>]
[<a href="/"
onmouseover="document.bgColor='olivedrab'">Olive Drab</a>]
[<a href="/"
onmouseover="document.bgColor='orange'">Orange</a>]
</CENTER>
</br>
<form name="calc">
<table border="2" width="50" height="50" cellpadding="1" cellspacing="5" align="center">
<tr>
<td colspan="4" align="center">
<input type="text" name="disp" size="22" value="0" width="100%"/>
</td>
</tr>
<tr>
<td width="50">
<div align="center">
<input type="button" name="7" value="7" onClick="tampil(this.form.disp,'7')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="8" value="8" onClick="tampil(this.form.disp,'8')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="9" value="9" onClick="tampil(this.form.disp,'9')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="tambah" value="+" onClick="tampil(this.form.disp,'+')" />
</div>
</td>
</tr>
<tr>
<td width="50">
<div align="center">
<input type="button" name="4" value="4" onClick="tampil(this.form.disp,'4')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="5" value="5" onClick="tampil(this.form.disp,'5')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="6" value="6" onClick="tampil(this.form.disp,'6')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="kurang" value="-" onClick="tampil(this.form.disp,'-')" />
</div>
</td>
</tr>
<tr>
<td width="50">
<div align="center">
<input type="button" name="1" value="1" onClick="tampil(this.form.disp,'1')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="2" value="2" onClick="tampil(this.form.disp,'2')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="3" value="3" onClick="tampil(this.form.disp,'3')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="kali" value="*" onClick="tampil(this.form.disp,'*')" />
</div>
</td>
</tr>
<tr>
<td width="50">
<div align="center">
<input type="button" name="0" value="0" onClick="tampil(this.form.disp,'0')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="titik" value="." onClick="tampil(this.form.disp,'.')" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="ubah" value="+/-" onClick="balik(this.form.disp)" />
</div>
</td>
<td width="50">
<div align="center">
<input type="button" name="bagi" value="/" onClick="tampil(this.form.disp,'/')" />
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<input type="button" name="hitung" value="=" onClick="proses(this.form.disp)" />
</div>
</td>
<td colspan="2">
<div align="center">
<input type="button" name="hapus" value="C" onClick="this.form.disp.value='0' " />
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
===================== copy sampai disini saja ==================================
Mungkin itu saja share dari saya untuk kali ini...mudah-mudahan bermanfaat..('_')
———
Back