Ïðèìåð ïðîñòîãî êàëüêóëÿòîðà
|
Àâòîð: Àðòåìüåâ Ñåðãåé Èãîðåâè÷ ICQ: 438856621 email: _spin_@bk.ru |
Çà÷àñòóþ, íà ñàéòàõ âîçíèêàåò íåîáõîäèìîñòü äîáàâëåíèÿ íà ñòðàíèöó ïðîñòîãî êàëüêóëÿòîðà.  ñåòè Èíòåðíåò âû ïðè æåëàíèè ñìîæåòå íàéòè ðàçëè÷íûå ïðèìåðû: êðåäèòíûé êàëüêóëÿòîð, êàëüêóëÿòîð ñêèäîê è ò.ä. Âñå îíè ðàáîòàþò ïî îäíîìó ïðèíöèïó, îòëè÷àþòñÿ ëèøü èíòåðôåéñîì è ïîðÿäêîì âû÷èñëåíèé ðåçóëüòàòà.
 ýòîì ïðèìåðå ìû ðàññìîòðèì ïðîöåññ ñîçäàíèÿ ïðîñòîãî êàëüêóëÿòîðà, êîòîðûé ïðè íåîáõîäèìîñòè ìîæíî ëåãêî ïåðåäåëàòü ïîä âàøè íóæäû.
Äëÿ íà÷àëà ñîçäàäèì HTML-êîä äëÿ íàøåãî êàëüêóëÿòîðà:
<style type="text/css">
.tblCalc{
border:1px solid gray;
margin:0;
padding:0;
width:250px;
text-align:center;
}
.tblCalc input{
border:1px solid gray;
width:30px;
margin:4px;
}
#btnWide{
width:80px;
}
#editWide{
width:250px;
}
</style>
<form name="calc" action="">
<table class="tblCalc" cellpadding=0 cellspacing=0>
<tr>
<td colspan=5 align=middle>
<input id="editWide" name="ReadOut" type="Text"
size=28 value="0" width="250px">
</td>
</tr>
<tr>
<td colspan="3"></td>
<td><input name="btnClear" type="Button"
value="C" onclick="Clear()" /></td>
<td><input name="btnClearEntry" type="Button"
value="CE" onclick="ClearEntry()" /></td>
</tr>
<tr>
<td><input name="btnSeven" type="Button"
value="7" onclick="NumPressed(7)"></td>
<td><input name="btnEight" type="Button"
value="8" onclick="NumPressed(8)"></td>
<td><input name="btnNine" type="Button"
value="9" onclick="NumPressed(9)"></td>
<td><input name="btnPlus" type="Button"
value="+" onclick="Operation('+')" /></td>
<td><input name="btnMultiply" type="Button"
value="*" onclick="Operation('*')" /></td>
</tr>
<tr>
<td><input name="btnFour" type="Button"
value="4" onclick="NumPressed(4)"></td>
<td><input name="btnFive" type="Button"
value="5" onclick="NumPressed(5)"></td>
<td><input name="btnSix" type="Button"
value="6" onclick="NumPressed(6)"></td>
<td><input name="btnMinus" type="Button"
value="-" onclick="Operation('-')" /></td>
<td align=middle><input name="btnDivide" type="Button"
value=" / " onclick="Operation('/')" /></td>
</tr>
<tr>
<td><input name="btnOne" type="Button"
value="1" onclick="NumPressed(1)"></td>
<td><input name="btnTwo" type="Button"
value="2" onclick="NumPressed(2)"></td>
<td><input name="btnThree" type="Button"
value="3" onclick="NumPressed(3)"></td>
<td><input name="btnPercent" type="Button"
value="%" onclick="Percent()" /></td>
<td align=middle> </td>
</tr>
<tr>
<td><input name="btnZero" type="Button"
value="0" onclick="NumPressed(0)"></td>
<td><input name="btnDecimal" type="Button"
value="." onclick="Decimal()"></td>
<td><input name="btnNeg" type="button"
value="+/-" onclick="Neg()" /></td>
<td colspan="2"><input id="btnWide" name="btnEquals"
type="Button" value="=" onclick="Operation('=')"></td>
</tr>
</table>
</form>
Ïîëó÷èì ñëåäóþùèé âèä:
Ïðè íàæàòèè íà ëþáóþ êíîïêó ñêîðåå âñåãî ïîÿâèòñÿ îøèáêà, ò.ê. ìû åù¸ íå íàïèñàëè êîä ñîîòâåòñòâóþùèõ îáðàáîò÷èêîâ. Ñëåäóþùèé ñêðèïò íóæíî äîáàâèòü â ëþáîì ìåñòå ñòðàíèöû:
<script language="JavaScript">
var Fcalc = document.calc;
var Currents = 0;
var FlagNewNum = false;
var PendingOp = "";
// îáðàáîò÷èê íàæàòèÿ // öèôðîâîé êíîïêè function NumPressed (Num)
{
if (FlagNewNum)
{
Fcalc.ReadOut.value = Num;
FlagNewNum = false;
}
else
{
if (Fcalc.ReadOut.value == "0")
Fcalc.ReadOut.value = Num;
else
Fcalc.ReadOut.value += Num;
}
}
// îáðàáîò÷èê íàæàòèÿ // êíîïêè äåéñòâèÿ
function Operation (Op)
{
var Readout = Fcalc.ReadOut.value;
if (FlagNewNum && PendingOp != "=") { Fcalc.ReadOut.value = Currents; }
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Currents += parseFloat(Readout);
else if ( '-' == PendingOp )
Currents -= parseFloat(Readout);
else if ( '/' == PendingOp )
Currents /= parseFloat(Readout);
else if ( '*' == PendingOp )
Currents *= parseFloat(Readout);
else
Currents = parseFloat(Readout);
Fcalc.ReadOut.value = Currents;
PendingOp = Op;
}
}
// äîáàâëåíèå äåñÿòè÷íîé òî÷êè ñ ÷èñëó
function Decimal ()
{
var curReadOut = Fcalc.ReadOut.value;
if (FlagNewNum)
{
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
Fcalc.ReadOut.value = curReadOut;
}
// Î÷èñòêà òåêóùåãî ðåçóëüòàòà
function ClearEntry ()
{
Fcalc.ReadOut.value = "0";
FlagNewNum = true;
}
// Ïîëíàÿ î÷èñòêà âñåõ ðåçóëüòàòîâ
function Clear ()
{
Currents = 0;
PendingOp = "";
ClearEntry();
}
// ìåíÿåì çíàê òåêóùåãî ðåçóëüòàòà
function Neg ()
{
Fcalc.ReadOut.value =
parseFloat(Fcalc.ReadOut.value) * -1;
}
// âû÷èñëÿåì çíà÷åíèå ïðîöåíòîâ
function Percent ()
{ Fcalc.ReadOut.value =
(parseFloat(Fcalc.ReadOut.value) / 100) *
parseFloat(Currents);
}
</script>
Ñêðèïò äîñòàòî÷íî ëîãè÷åí è ïðîñò äëÿ ïîíèìàíèÿ, ñòîèò ëèøü íåìíîãî â í¸ì ðàçîáðàòüñÿ. Çäåñü èñïîëüçîâàíà ôîðìà è ýëåìåíòû ââîäà òèïà "text" è "button", ïðè÷åì ê ïîñëåäíèì ïðèâÿçàíû íàøè ñîáñòâåííûå îáðàáîò÷èêè.
Äëÿ òðåíèðîâêè ïîïðîáóéòå äîáàâèòü â ýòîò êàëüêóëÿòîð èíæåíåðíûå ôóíêöèè, íàïðèìåð, âû÷èñëåíèå êâàäðàòíîãî êîðíÿ è âîçâåäåíèå â ñòåïåíü. Ïîäñêàçêà: íåîáõîäèìî áóäåò äîáàâèòü ñîîòâåòñòâóþùèå êíîïêè è âíåñòè èçìåíåíèÿ â ôóíêöèþ Operation().
