halo sobat blogger jumpa lagi dengan q di blog mmn naufal kali ini saya akan share kakulator html 5 css 3 n ini adalah text html nya dan yang setelah text ini adalah contoh jadinya html tersebut
Trimakasih ya sudah mengunjung blog saya semoga bermanfaat
<html>
<head>
<title>Kalkulator Sederhana</title>
<style type="text/css">
#tbl{
background:#000;
-moz-box-shadow:2px 2px 15px; #000;
margin-top:20px;
}
.btn{
background-color:#000;
width:30px;
height:30px;
font-size:5mm;
font-family:trebuchet ms;
display:block;
color:#FFF;
text-decoration:none;
border-style:outset;
}
.tmpl{
width:200px;
height:30px;
font-size:5mm;
font-family:trebuchet ms;
border-style: inset;
-moz-border-radius:10px 0px 10px 0px;
}
</style>
<script language="javascript">
angka="";
bil1,bil2,ttl;
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 kurang(){
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 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;
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
<p><h1 align="center"><blink>KALKULATOR SEDERHANA</blink></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: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:tambah();" class="btn">+</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:kurang();" class="btn">-</a></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:kali();" class="btn">x</a></td>
</tr>
<tr align="center">
<td><a href="javascript:hps();" class="btn">C</a></td>
<td><a href="javascript:nol();" class="btn">0</a></td>
<td><a href="javascript:sama_dengan();" class="btn">=</a></td>
<td><a href="javascript:bagi();" class="btn">/</a></td>
</tr>
<tr align="center">
<td colspan="4"> </td>
</tr>
</table>
</form>
<p> </p>
<hr size="10" noshade="noshade"/>
</body>
</html>
Kalkulator Sederhana
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
