Sådan tilføjes i HTML

Ved at bruge et par HTML-sætninger og et lille JavaScript kan du opbygge din egen regnemaskine, der udfører tilføjelse. Denne opgave er ikke så vanskelig som det ser ud til, fordi HTML skaber regnemerkontroller til dig, og JavaScript håndterer alle beregningerne. Alt du skal gøre er at lægge kontrollerne på din webside, så de skaber den brugergrænseflade, du ønsker.

Regnemerkontroller

Regnemaskiner, der tilføjer tal, kræver fire grundlæggende kontroller: to tekstbokse for at indtaste tal, en tekstboks for at vise resultater og en knap. Den følgende HTML-kode opretter disse fire kontroller:

+ =

Knappen indeholder et opkald til en JavaScript-funktion, der tilføjer de to tal og gemmer resultatet i den tredje tekstboks. Hver tekstboks kræver en "id" -værdi, som JavaScript bruger til at hente referencer til tekstbokse.

JavaScript Logic

Følgende JavaScript-sætninger opretter tre objekter, der indeholder henvisninger til de tre tekstbokse:

var box1 = document.getElementById ("box1"); var box2 = document.getElementById ("box2"); var box3 = document.getElementById ("box3");

Du kan derefter tilføje numre i de to første tekstbokse og gemme dem i en variabel som "resultat" som følger:

var resultat = nummer (box1.value) + nummer (box2.value); box3.innerHTML = resultat;

Funktionen "Nummer" konverterer de tekstværdier, der er gemt i tekstbokse, til tal, som JavaScript kan manipulere.

Anvendelse

Upload din HTML-kalkulatorside til din webserver, så alle, der har adgang til internettet, kan bruge den. Du kan også køre den lokalt på din computer. Når du har lavet dit HTML-dokument, skal du finde det i Windows Stifinder og dobbeltklikke på ikonet for at vise det i din standardwebbrowser. Du kan derefter bruge regnemaskinen til at tilføje og subtrahere tal. Browsere giver dig også mulighed for at bogmærke lokale HTML-sider, der ligger på din harddisk. Gem din kalkulatorside som et bogmærke, så du kan åbne den til enhver tid og udføre beregninger lige fra din browser.

Forbedringer

Du behøver ikke at forstå Cascading Style Sheets eller CSS for at oprette en webside. Men hvis du kender en lille CSS, kan du bruge den skabe mere avancerede kontroller. Brug farve- og kantattributter, f.eks. For at tilføje farverige grænser rundt om dine tekstbokse. Du kan endda sætte alle kontrollerne inde i en "div" -kontrol og tilføje et baggrundsbilde, så din regnemaskine ser ud som en rigtig. Hvis du har brug for at tilføje flere tal, skal du tilføje yderligere tekstbokse til HTML-siden og ændre JavaScript-koden, så den indeholder de pågældende tekstbokse i beregningen.

Anbefalet