 |
| javascript ile hesap makinesi nasil yapılır? |
<!DOCTYPE html>
<body>
<head>
<title>Hesap Makinesi</title>
<script type="text/javascript">
function cfunction(sayi)
{
if(document.hesaplama.sonuc.value==0) /* Hesaplama form nesnesinin içindeki sonuc inputunun içerisindeki değer = 0 ise*/
{
document.hesaplama.sonuc.value=sayi; /* inputun içerisindeki değeri sayi diye bir değişkene ata */
}
else
{
document.hesaplama.sonuc.value += sayi; /* inputun içerisindeki değer 0 değilse */
}
}
function toplama() /*hesaplama formunun içerisindeki input değerlerini sayi1 diye bir değişkene ata */
{
sayi1=parseInt(document.hesaplama.sonuc.value);
document.hesaplama.sonuc.value=''; /* + ya bastığı zaman input değerini yok sayıyor. */
islem=toplama; /* en nihayetinde toplama fonksiyonunu islem diye bir değişkene ata */
}
function cikarma()
{
sayi1=parseInt(document.hesaplama.sonuc.value);
document.hesaplama.sonuc.value="";
islem=cikarma;
}
function carpma()
{
sayi1=parseInt(document.hesaplama.sonuc.value);
document.hesaplama.sonuc.value="";
islem=carpma;
}
function bolme()
{
sayi1=parseInt(document.hesaplama.sonuc.value);
document.hesaplama.sonuc.value="";
islem=bolme;
}
function temizle ()
{
document.hesaplama.sonuc.value= 0;
}
function esittir()
{
sayi2=parseInt(document.hesaplama.sonuc.value);
if(islem==toplama)
{
document.hesaplama.sonuc.value=sayi1+sayi2;
}
if(islem==cikarma)
{
document.hesaplama.sonuc.value=sayi1-sayi2;
}
if(islem==carpma)
{
document.hesaplama.sonuc.value=sayi1*sayi2;
}
if(islem==bolme)
{
document.hesaplama.sonuc.value=sayi1/sayi2;
}
}
</script>
<style type="text/css">
body { background: #ff8835; }
table { border-spacing: 0px; border: 0px; margin-top: 100px; }
td { border : 0px; }
#esittir-btn, #temizle-btn { width: 45px; height: 94px; border-radius: 10px; font-size: 18px; }
.btn { width: 40px; height: 40px; text-align: center; color: #ff8835; font-weight: bold; }
.btn:hover, #esittir-btn:hover, #temizle-btn:hover, .sıfır:hover { color: #fff; background: #fb4d1a; }
.sıfır { width: 139px; height: 45px; font-size: 18px; }
.sonuc-txt { width: 229px; height: 30px; text-align: right; text-indent: 20px; direction: rtl; font-size: 18px; cursor: text; }
input { border-radius: 40px; background: #fff; padding: 0px; border: 0px; cursor: pointer; }
input:focus { outline: none; }
</style>
</head>
<form name="hesaplama">
<table border="2" align="center">
<tr>
<td colspan="5">
<input type="text" name="sonuc" class="sonuc-txt" value="0"><br>
</td>
</tr>
<tr>
<td><input type="button" class="btn" value="7" OnClick="cfunction(7)"></td>
<td><input type="button" class="btn" value="8" OnClick="cfunction(8)"></td>
<td><input type="button" class="btn" value="9" OnClick="cfunction(9)"></td>
<td><input type="button" class="btn" value="/" OnClick="bolme()"></td>
<td rowspan="2">
<input type="button" value="C" id="temizle-btn" OnClick="temizle()">
</td>
</tr>
<tr>
<td><input type="button" class="btn" value="4" OnClick="cfunction(4)"></td>
<td><input type="button" class="btn" value="5" OnClick="cfunction(5)"></td>
<td><input type="button" class="btn" value="6" OnClick="cfunction(6)"></td>
<td><input type="button" class="btn" value="*" OnClick="carpma()"></td>
</tr>
<tr>
<td><input type="button" class="btn" value="1" OnClick="cfunction(1)"></td>
<td><input type="button" class="btn" value="2" OnClick="cfunction(2)"></td>
<td><input type="button" class="btn" value="3" OnClick="cfunction(3)"></td>
<td><input type="button" class="btn" value="-" OnClick="cikarma()"></td>
<td rowspan="2">
<input type="button" value="=" id="esittir-btn" OnClick="esittir()">
</td>
</tr>
<tr>
<td colspan="3"><input type="button" class="sıfır" value="0" OnClick="cfunction(0)"></td>
<td><input type="button" value="+" class="btn" OnClick="toplama()"></td>
</tr>
</table>
</form>
</body>
</html>
0 yorum:
Yorum Gönder