Integrarea unei calculator (masina de calcul) in pagina Web ar putea fi necesara cand dorim sa punem la dispozitia vizitatorului toate mijloacele pentru a calcula cat mai rapid costurile care intervin la o oferta de pa site-ul nostru, de exemplu achizitionarea unei proprietati imobiliare cu un credit bancar sau cand doreste sa afle cat sunt taxele de transport la o achizitie din magazinul nostru on line.

Efortul programatorului nu este prea mare atunci cand este ajutat de script-ul JS pe care il voi prezenta in continuare. Script-ul este simplu de implementat iar rezultatul se obtine mai rapid decat mi-a luat mie sa scriu acest articol.

Problema

Sa afisam pe pagina noastra o masina de calcul.

Solutie

style.css

.active_menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #0000FF;
	text-decoration: none;
}
.form_input {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #666666;
	border: 1px solid #333333;
}
.form_text_category {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}

Evident, aici este locul in care va puteti juca cu culorile, cu marimea caracterelor si cu pozitia in pagina.

calculator.js

Tot in tag-ul HEAD inserati linia care incarca scriptul JS aferent.

calculator.html

In locul in care doriti sa apara calculatorul:

<div id="attach_calc_div" style="background:white;border:1px solid #2266AA;display:none;">
<form name="attach_calc_form" action="" style="margin-bottom:0px;margin-top:0px;padding:2px">
<table style="border:none;padding:0px;border-spacing:0px">

<tr>
    <td>
        <input name="cbtn7" type="button" class="form_input" style="width:20px" onmouseup="calc_press(7)" value="7">
    </td>
    <td>
        <input name="cbtn8" type="button" class="form_input" style="width:20px" onmouseup="calc_press(8)" value="8">
    </td>
    <td>
        <input name="cbtn9" type="button" class="form_input" style="width:20px" onmouseup="calc_press(9)" value="9">
    </td>
    <td>
        <input name="cbtnp" type="button" class="form_text_category" style="width:40px" onmouseup="calc_press('+')" value="+">
    </td>
    <td>
        <input name="cbtnm" type="button" class="form_text_category" style="width:40px" onmouseup="calc_press('-')" value="-">
    </td>
</tr>

<tr>
    <td>
        <input name="cbtn4" type="button" class="form_input" style="width:20px" onmouseup="calc_press(4)" value="4">
    </td>
    <td>
        <input name="cbtn5" type="button" class="form_input" style="width:20px" onmouseup="calc_press(5)" value="5">
    </td>
    <td>
        <input name="cbtn6" type="button" class="form_input" style="width:20px" onmouseup="calc_press(6)" value="6">
    </td>
    <td>
        <input name="cbtnm" type="button" class="form_text_category" style="width:40px" onmouseup="calc_press('*')" value="*">
    </td>
    <td>
        <input name="cbtnd" type="button" class="form_text_category" style="width:40px" onmouseup="calc_press('/')" value="/">
    </td>
</tr>

<tr>
    <td>
        <input name="cbtn1" type="button" class="form_input" style="width:20px" onmouseup="calc_press(1)" value="1">
    </td>
    <td>
        <input name="cbtn2" type="button" class="form_input" style="width:20px" onmouseup="calc_press(2)" value="2">
    </td>
    <td>
        <input name="cbtn3" type="button" class="form_input" style="width:20px" onmouseup="calc_press(3)" value="3">
    </td>
    <td>
        <input name="cbtnc" type="button" class="form_text_category" style="width:40px" onmouseup="calc_press('C')" value="C">
    </td>
    <td>
        <input name="cbtne" type="button" class="form_text_category" style="width:40px" onmouseup="calc_press('CE')" value="CE">
    </td>
</tr>

<tr>
    <td>
        <input name="cbtn0" type="button" class="form_input" style="width:20px" onmouseup="calc_press(0)" value="0">
    </td>
    <td>
        <input name="cbtnd" type="button" class="form_input" style="width:20px" onmouseup="calc_press('.')" value=".">
    </td>
    <td>
        <input name="cbtnn" type="button" class="form_text_category" style="width:30px" onmouseup="calc_press('+/-')" value="+/-">
    </td>
    <td colspan=2>
        <input name="cbtnq" type="Button" class="form_text_category" style="width:84px" onmouseup="calc_press('=')" value="=">
    </td>
</tr>

</table>
</form>
</div>
<form name="calculatorInput" action="">
    <td width="40%">
        <div>
        <span class="active_menu"><strong>Calculator: </strong></span>
      <input name="input" type="text" class="form_input" value="0" size="21" />
            <script type="text/javascript">
          <!--
                calc_setup('calculatorInput', 'input');
            //-->
            </script>
        </div>
    </td>
</form>

Explicatii

Lucrurile mi se par destul de clare. Eventualele nelamuriri le puteti inlatura studiind fisierele descarcate la pagina Demo si Download.

Observatii

Solutia poate fi folosita fara nicio restrictie si fara consecinte negative.

Multe multumiri...

Internetului ca exista si celor care ne mai spun pe gratis cate ceva, chiar daca i-a costat mult timp sa invete!

Daca articolul v-a fost util, va rugam sa lasati un comentariu.