Kalkulator sederhana dengan HTML
Contoh membuat kalkulator sederhana dengan tampilan html
<html>
<head>
<title>KALKULATOR</title>
<style type="text/css">
#tbl{
background:#CCC -moz-linear-gradient(top,#FC9,#F60);
-moz-box-shadow:2px 2px 15px; #000;
margin-top:20px;
}
.btn{
background-color:#000;
width:50px;
height:30px;
font-size:5mm;
font-family:tahoma;
display:block;
color:#FFF;
text-decoration:none;
border-style:outset;
}
.btn:hover{
border-style: inset;
background-color:#666;
}
.tmpl{
width:240px;
height:30px;
font-size:5mm;
font-family:tahoma;
border-style: inset;
-moz-border-radius:10px 0px 10px 0px;
}
</style>
<script language="javascript">
angka="";
bil1,bil2,ttl,ttl2=0,i;
op,pil;
function nol(){
angka = angka+"0";
document.form1.hsl.value = angka;
}
function satu(){
angka = angka+"1";
document.form1.hsl.value = angka;
}
function dua(){
angka = angka+"2";
document.form1.hsl.value = angka;
}
function tiga(){
angka = angka+"3";
document.form1.hsl.value = angka;
}
function empat(){
angka = angka+"4";
document.form1.hsl.value = angka;
}
function lima(){
angka = angka+"5";
document.form1.hsl.value = angka;
}
function enam(){
angka = angka+"6";
document.form1.hsl.value = angka;
}
function tujuh(){
angka = angka+"7";
document.form1.hsl.value = angka;
}
function delapan(){
angka = angka+"8";
document.form1.hsl.value = angka;
}
function sembilan(){
angka = angka+"9";
document.form1.hsl.value = angka;
}
function hps(){
angka ="";
document.form1.hsl.value = angka;
}
function tambah(){
bil1 = angka;
op = "+";
document.form1.hsl.value = op;
angka = "";
pil = 1;
}
function krg(){
bil1 = angka;
op = "-";
document.form1.hsl.value = op;
angka = "";
pil = 2;
}
function kali(){
bil1 = angka;
op = "x";
document.form1.hsl.value = op;
angka = "";
pil = 3;
}
function bagi(){
bil1 = angka;
op = "/";
document.form1.hsl.value = op;
angka = "";
pil = 4;
}
function nol_dua(){
angka = angka+"00";
document.form1.hsl.value = angka;
}
function pangkat_dua(){
bil1=angka;
document.form1.hsl.value=angka*angka;
angka="";
}
function pangkat_tiga(){
bil1=angka;
document.form1.hsl.value=angka*angka*angka;
angka="";
}
function pangkat(){
bil1=angka;
op = "^";
document.form1.hsl.value = op;
angka = "";
pil = 5;
}
function sama_dengan(){
if(pil==1){
bil2 = angka
ttl = parseFloat(bil1)+parseFloat(bil2);
angka= parseFloat(ttl);
document.form1.hsl.value = angka;
}
else if(pil==2){
bil2 = angka
ttl = parseFloat(bil1)-parseFloat(bil2);
angka= parseFloat(ttl);
document.form1.hsl.value = angka;
}
else if(pil==3){
bil2 = angka
ttl = parseFloat(bil1)*parseFloat(bil2);
angka= parseFloat(ttl);
document.form1.hsl.value = angka;
}
else if(pil==4){
bil2 = angka
ttl = parseFloat(bil1)/parseFloat(bil2);
angka= parseFloat(ttl);
document.form1.hsl.value = angka;
}
else if(pil==5){
bil2 = angka;
ttl = bil1;
for (i=1;i<bil2;i++)
{
ttl = ttl*bil1;
}
angka= parseFloat(ttl);
document.form1.hsl.value = angka;
}
}
</script>
</head>
<body bgcolor="#FFFFCC">
<p><h1 align="center">KALKULATOR</h1></p><hr size="10" noshade="noshade"/>
<form name="form1">
<table align="center" cellpadding="2" cellspacing="2" id="tbl">
<tr>
<td height="60" colspan="4" valign="middle"><input name="hsl" type="text" class="tmpl" id="hsl" /></td>
</tr>
<tr align="center">
<td><a href="javascript:tujuh();" class="btn">7</a></td>
<td><a href="javascript:delapan();" class="btn">8</a></td>
<td><a href="javascript:sembilan();" class="btn">9</a></td>
<td><a href="javascript:hps();" class="btn">C</a></td>
</tr>
<tr align="center">
<td><a href="javascript:empat();" class="btn">4</a></td>
<td><a href="javascript:lima();" class="btn">5</a></td>
<td><a href="javascript:enam();" class="btn">6</a></td>
<td><a href="javascript:bagi();" class="btn">/</a></td>
</tr>
<tr align="center">
<td><a href="javascript:satu();" class="btn">1</a></td>
<td><a href="javascript:dua();" class="btn">2</a></td>
<td><a href="javascript:tiga();" class="btn">3</a></td>
<td><a href="javascript:kali();" class="btn">x</a></td>
</tr>
<tr align="center">
<td><a href="javascript:nol();" class="btn">0</a></td>
<td><a href="javascript:nol_dua();" class="btn">00</a></td>
<td><a href="javascript:tambah();" class="btn">+</a></td>
<td><a href="javascript:krg();" class="btn">-</a></td>
</tr>
<tr align="center">
<td><a href="javascript:pangkat();" class="btn">^</a></td>
<td><a href="javascript:pangkat_dua();" class="btn">^2</a></td>
<td><a href="javascript:pangkat_tiga();" class="btn">^3</a></td>
<td><a href="javascript:sama_dengan();" class="btn">=</a></td>
</tr>
<tr align="center">
<td colspan="4"> </td>
</tr>
</table>
</form>
<p> </p>
<hr size="10" noshade="noshade"/>
</body>
</html>
hasilnya seperti ini
0 comments:
Post a Comment