Hoe maak je een Berekeningen webpagina maken

webpagina rekenmachines zijn een leuke manier om uw bezoekers een handig hulpmiddel te geven voor het doen van een kleine snelle wiskunde zonder te trekken uit hun dia heersers.Rekenmachines voeg een beetje plezier en pit aan uw website.Als u het bevorderen van een product of dienst, kan calculators u helpen uw boodschap naar uw klanten en het genereren van terugkerende bezoekers.JavaScript kunt u berekeningen maken op uw webpagina, met behulp van de nummers van uw bezoekers typen in een HTML-formulier.Deze eenvoudige calculator is het startpunt voor het ontwerpen van uw eigen website rekenmachine.

wat je

  • tekst of HTML-editor
  • webpagina
Need

instructies

  1. Open de webpagina waar u wilt dat uw rekenmachine.

  2. Kopieer het volgende script in de header sectie van de pagina (tussen de & lt; head & gt; en & lt; / head & gt; labels boven de & lt; body & gt; tag).

    & amp; lt; script type = \ & amp; quot; text / javascript \ & amp; quot;language = \ & amp; quo
    t; Javascript \ & amp; quot; & gt;

    var v1 = 0

    GO

    var v2 = 0

    GO

    var antwoord = 0

    GO

    functie berekenen () {//
    De Berekening: verandering van operator in deze vergelijking te veranderen de berekening
    antwoord = v1 + v2

    GO

    var elem

    GO

    elem = document.getElementById (\ & amp; quot; v1 \ & amp; quot;)

    GO

    elem.value = v1

    GO

    elem = document.getElementById (\ & amp; quot; v2 \ & amp; quot;)

    GO

    elem.value = v2

    GO

    elem = document.getElementById (\ & amp; quot; antwoord \ & amp; quot;)

    GO

    elem.value = beantwoorden

    GO

    }

    functie setValue (elem) {var
    val = 0,0

    GO

    if (elem.value = \ & amp;! quot; \ & amp; quot;) {
    val = parseFloat (elem.value)

    GO


    } else {
    val = 0.0

    GO

    }
    schakelaar (elem.id) {
    geval \ & amp; quot; v1 \ & amp; quot ;: v1 = val;break case

    GO

    \ & amp; quot; v2 \ & amp; quot ;: v2 = val;break

    GO

    }
    berekenen ()

    GO

    }
    & amp; lt; / script & gt;
  3. Voeg het kenmerk onload = \ "berekenen (); \" om de & lt; body & gt;tag, dus het lijkt erop dat dit: & lt; body onload = \ "berekenen (); \" & gt ;.Als er andere attributen in het lichaam tag, ze niet verwijderen, voeg het nieuwe kenmerk onload.

  4. In het lichaam van uw webpagina, voeg de volgende HTML-formulier waar je zou willen om de rekenmachine te laten verschijnen:

    & lt; vorm & gt;

    & amp; lt; input type = \ & amp; quot; tekst \ & amp; quot;id = \ & amp; quot; v1 \ & amp; quot;onkeyup = \ & amp; quot; javascript: setValue (dit); \ & amp; quot; & gt;+
    & amp; input type = \ & amp;; lt quot; tekst \ & amp; quot;id = \ & amp; quot; v2 \ & amp; quot;onkeyup = \ & amp; quot; javascript: setValue (dit); \ & amp; quot; & gt;=
    & amp; input type = \ & amp;; lt quot; tekst \ & amp; quot;id = \ & amp; quot; antwoord \ & amp; quot;readonly & gt;

    & lt; / form & gt;

  5. Verander de berekening door het veranderen van de "answer = v1 + v2" in de sectie JavaScript lijn.Bijvoorbeeld, als u wilt vermenigvuldigen in plaats van toe te voegen, verandert het plusteken om een ​​asterisk (*) als volgt:

    antwoord = v1 * v2

    Werk de HTML-formulier op de nieuwe berekening te laten zien.

Tips & amp;Waarschuwingen

  • toevoegen tekst, stijl en kleur van de berekening in.Lay-out van de input-tags de manier waarop u ze wilt weergeven.Omschrijvingen toe te voegen aan de invoervelden.Zet een rode contour rond het antwoord.Creatief zijn.
  • Experimenteer met de vorm JavaScript en HTML.Heb je nodig om een ​​berekening uit te voeren op meer dan twee getallen?Voor elke regel code die een "v2" (met uitzondering van de berekening lijn) kopieer de code om een ​​nieuwe lijn en verandering "v2" naar "v3." Voeg de nieuwe "v3" waarde voor de berekening in de Javascript, zoals deze heeft: "answer = v1 + v2 + v3."

Resources

  • JavaScript Arithmetic Operators: Basic Math Operations
  • JavaScript Core Math object: Geavanceerd Math Operations
706
0
0
Java Script