Source Kodenya :
<html>
<title>KalkulatorKu</title>
<script language="JavaScript">
window.defaultStatus=
function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value=c
}
function kurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}
function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}
function bagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}
function pangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.hasil.value = c
}
function RESET()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""
}
</SCRIPT>
<body onload=kosong()>
<RIGHT>
<hr width = "500" align="left"; />
<h1><strong><font color="Green"> <font size="5"> Kalkulator Sederhana Dengan Java Script</strong></font></h1>
<hr width = "500" align="left"; />
<FORM name="form">
<pre>
<font color="red">Input 1 : </font>
<br/>
<input type="text" name="a">
<br/>
<font color="red">Input 2 : </font>
<br/>
<input type="text" name="b">
</pre>
<input type="button" value=" + " onClick="tambah()">
<input type="button" value=" - " onClick="kurang()">
<input type="button" value=" x " onClick="kali()">
<input type="button" value=" / " onClick="bagi()">
<input type="button" value=" ^ " onClick="pangkat()"><br>
<br/>
<br/>
<font color="red">Hasil : </font>
<br/>
<input type "text" name="hasil" disabled="true">
<br/>
<br/>
<input type="button" value=" Bersihkan! " onClick="RESET()">
<br/>
<br/>
<hr width = "500" align="left"; />
<br/>
<br/>
<font color="grey">::Tampilan Kalkulator Sederhana Menggunakan Java Script:: </font>
</FORM>
</RIGHT>
</body>
</html>
Hasinya:
Membuat Form Pemesanan Makanan Berbasis JAVASCRIPT
Source Kodenya:
<em><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
<head>
<title>Form Pemesanan</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function hitung() {
var myForm = document.form1;
var hargaBakso = parseInt(myForm.bakso.value) * parseInt(myForm.pesanbakso.value);
var hargaSoto = parseInt(myForm.soto.value) * parseInt(myForm.pesansoto.value);
var hargaMie = parseInt(myForm.mie.value) * parseInt(myForm.pesanmie.value);
var hargaDegan = parseInt(myForm.degan.value) * parseInt(myForm.pesandegan.value);
var hargaCampur = parseInt(myForm.campur.value) * parseInt(myForm.pesancampur.value);
var hargaTotal= hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;
if(hargaTotal>50000)
{
myForm.total.value = hargaTotal;
myForm.diskon.value = 10000;
myForm.bayar.value = hargaTotal - parseInt(myForm.diskon.value);
}
else
{
myForm.total.value = hargaTotal;
myForm.diskon.value = 0;
myForm.bayar.value = hargaTotal;
}
}
function hapus(){
document.form1.reset();
}
//-->
</script>
</head>
<body background="bg.jpg">
<h2 align="center"><--Warung Sederhana--></h2>
<form name = "form1" action="#">
<table border="1" align="center">
<tr>
<td width="30" align="center" bgcolor="white">
<strong>No</strong>
</td>
<td width="150" align="center" bgcolor="white">
<strong>Makanan/Minuman</strong>
</td>
<td width="165" align="center" bgcolor="white">
<strong>Harga</strong>
</td>
<td width="150" align="center" bgcolor="white">
<strong>Pesan</strong>
</td>
</tr>
<tr>
<td align="center" bgcolor="white">1</td>
<td bgcolor="white">Bakso Istimewa</td>
<td bgcolor="white">@<input type="text" name="bakso" value="12000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesanbakso" value="0" onkeyup="hitung()" /></td>
</tr>
<tr>
<td align="center" bgcolor="white">2</td>
<td bgcolor="white">Soto Spesial</td>
<td bgcolor="white">@<input type="text" name="soto" value="10000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesansoto" value="0" onkeyup="hitung()"/></td>
</tr>
<tr>
<td align="center" bgcolor="white">3</td>
<td bgcolor="white">Mie Ayam Super</td>
<td bgcolor="white">@<input type="text" name="mie" value="15000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesanmie" value="0" onkeyup="hitung()"/></td>
</tr>
<tr>
<td align="center" bgcolor="white">4</td>
<td bgcolor="white">Es Degan</td>
<td bgcolor="white">@<input type="text" name="degan" value="5000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesandegan" value="0" onkeyup="hitung()"/></td>
</tr>
<tr>
<td align="center" bgcolor="white">5</td>
<td bgcolor="white">Es Campur</td>
<td bgcolor="white">@<input type="text" name="campur" value="7000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesancampur" value="0" onkeyup="hitung()"/></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor="white">Jumlah Total</td>
<td bgcolor="white"><input type="text" name="total" style="text-align:right" disabled="true"/></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor="white">Diskon</td>
<td bgcolor="white"><input type="text" name="diskon" style="text-align:right" disabled="true"/></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor="white">Jumlah Dibayar</td>
<td bgcolor="white"><input type="text" name="bayar" style="text-align:right" disabled="true"/></td>
</tr>
</table>
<br />
<input type="button" value="HAPUS" onclick="hapus()" style="position:absolute; width:75px; height:30px; margin-left: 410px; top: 340px;" />
<br/>
<br/>
<br/>
<img src = "stroberi.png" width = "200" height = "150" style="margin-left: 410px;" />
</form>
</body>
</html></em>
Hasilnya:
Tidak ada komentar:
Posting Komentar