عمل الة حاسبة بالجافا اسكريبت
كيفية عمل الة حاسبة ب Html&Css
اكواد html
<html>
<head>
<title> My Calculator</title>
<style type="text/css">
input
{
border-radius:5px;
}
td{
padding: 5px 5px 5px 5px ;
}
.lblh
{
font-size: 25pt;
background-color: Azure;
color: navy;
border: 1px solid black;
font-family: impact;
text-align: center;
width: 190px;
}
.lbln
{
font-family: tahoma;
font-weight: bold;
font-size: 14pt;
}
.txtn
{
font-size: 14pt;
font-weight: bold;
color: blue;
text-align: center;
border: 1px solid black;
font-family: tahoma;
}
.btn
{
background: SteelBlue;
color: white;
width: 56px;
height: 46PX;
cursor: hand;
font-size: 14pt;
font-family: tahoma;
font-weight: bold;
border: 1px solid black;
}
</style>
</head>
<link rel="shortcut icon" href='images.jpg'>
<body>
<table align="center">
<tr>
<td colspan="2" align="center">
<div class="lblh">My calculator</div>
</td>
</tr>
<tr>
<td>
<label class="lbln">Number 1:</label>
</td>
<td>
<input id="txtNum1" class="txtn" type="text" / >
</td>
</tr>
<tr>
<td>
<label class="lbln">Number 2:</label>
</td>
<td>
<input id="txtNum2" class="txtn" type="text" / >
</td>
</tr>
<tr>
<td colspan="2" align="center">
<table>
<tr>
<td>
<input class="btn" type="button" value="+" onclick="calc('a') ;" />
</td>
<td>
<input class="btn" type="button" value="-" onclick="calc('s') ;"/>
</td>
<td>
<input class="btn" type="button" value="*" onclick="calc('m') ;" />
</td>
<td>
<input class="btn" type="button" value="/" onclick="calc('d') ;"/>
</td>
<td>
<input class="btn" type="button" value="MOD" onclick="calc('mod') ;" />
</td>
</tr>
<tr>
<td colspan="2" align="center" />
<label id="lblR" style="font-size: 30pt; font-weight: bold;">0</label>
</td>
</tr>
<tr>
<td colspan="2" align="left">
<input class="btn" onclick="window.close();" style="background: palevioletred; height:33px; width:80px;" type="button" value="Exit" />
</td>
</tr>
</table>
</body>
<script type="text/javascript">
function calc(ope) {
if( ope == 'a' )
window.lblR.innerHTML = eval (window.txtNum1.value) + eval (window.txtNum2.value) ;
if( ope == 's' )
window.lblR.innerHTML = eval (window.txtNum1.value) - eval (window.txtNum2.value) ;
if( ope == 'm' )
window.lblR.innerHTML = eval (window.txtNum1.value) * eval (window.txtNum2.value) ;
if( ope == 'd' )
window.lblR.innerHTML = eval (window.txtNum1.value) / eval (window.txtNum2.value) ;
if( ope == 'mod' )
window.lblR.innerHTML = eval (window.txtNum1.value) % eval (window.txtNum2.value) ;
</script>
</html>
