Kako stvoriti kalkulator s HTML-om

Autor: John Stephens
Datum Stvaranja: 21 Siječanj 2021
Datum Ažuriranja: 14 Svibanj 2024
Anonim
Create a simple calculator using HTML, CSS, JavaScript
Video: Create a simple calculator using HTML, CSS, JavaScript

Sadržaj

U ovom članku: Shvatite kôdOpišite osnovni kod kalkulatoraIzradite kalkulatorKoristite kalkulator11 Reference

Mnogo je načina za izračun računala na ugrađenom kalkulatoru, ali možete i sami kreirati koristeći samo HTML kod. Da biste to učinili, morate naučiti osnove HTML-a prije kopiranja potrebnog koda u e-datoteku koju spremite pomoću extension.html. Zatim jednostavno otvorite datoteku u svom omiljenom pregledniku kako biste pristupili kalkulatoru. Ova tehnika omogućuje izračun proračuna izravno u vašem pregledniku, dok uči osnove umjetnosti računalnog programiranja.


faze

1. dio Razumijevanje koda



  1. Shvatite kako kod radi. Kôd koji ćete koristiti za izradu kalkulatora temelji se na malim dijelovima koda koji međusobno rade na definiranju različitih elemenata dokumenta. Možete saznati više o HTML-u klikom na ovu vezu ili možete pročitati što svaki redak radi u kodu koji ćete koristiti za kalkulator.
    • hTML: ovaj dio koda označava ostatak dokumenta jezik koji se koristi. Upotrebljava se više različitih programskih jezika, a oznaka ostatku dokumenta ukazuje da ovaj put koristi HTML.
    • glava : ovo govori dokumentu da su sljedeće informacije podaci također nazvani "metapodaci". Oznaka se obično koristi za definiranje stilskih elemenata dokumenta, poput naslova, zaglavlja itd. To je poput kišobrana pod kojim je definiran ostatak koda.
    • naslov : Ovo je naslov koji ćete dati dokumentu. Ova se oznaka koristi za prikaz naslova dokumenta nakon njegovog otvaranja u pregledniku.
    • tijelo bgcolor = "#" : Ovo postavlja boju pozadine za dokument. Broj koji se pojavljuje nakon oštrog odgovara unaprijed određenoj boji.
    • = '' : Riječ u navodnicima označava boju e na dokumentu.
    • naziv oblika = "" : Ovaj atribut označava naziv oblika koji će se koristiti za strukturu onoga što slijedi kako bi JavaScript mogao znati o kojem se obliku govori. Na primjer, naziv obrasca koji ćemo koristiti je "kalkulator" koji će stvoriti specifičnu strukturu dokumenta.
    • tip unosa = "" : ovdje će se odvijati radnja. Atribut "tip unosa" govori dokumentu vrstu vrijednosti za e u ostalim zagradama. Na primjer, to mogu biti e, lozinka, gumb (kao što će biti za naš kalkulator) i tako dalje.
    • value = "" : Ovaj atribut govori dokumentu što će sadržavati atribut "vrsta unosa". Za kalkulator prikazat ćete brojeve od 1 do 9 i aritmetičke znakove (+, -, *, /, =).
    • onclick = "" : Ovaj dio koda opisuje događaj koji govori dokumentu da se nešto mora dogoditi kada se gumb aktivira. Za kalkulator želite prikazati broj koji odgovara gumbu koji je korisnik pritisnuo. Na primjer, ako je uključen gumb 6, želite da stavite document.calculator.in.value + = 6 između navodnika.
    • br : to je oznaka koja označava prijelaz retka, sav ostatak koda koji slijedi pojavit će se u nastavku.
    • / oblik, / tijelo i / html Te oznake za zatvaranje kažu pregledniku da su oznake koje ste otvorili ranije dovršeni i zatvoreni.

Drugi dio Napisati osnovni kod kalkulatora

Kopirajte kôd u nastavku. Odaberite e dolje držeći kursor pritisnutim iz gornjeg lijevog ugla okvira i povlačenjem ga u donji desni kut, tako da cijeli e izgleda plavo. Zatim pritisnite "Command + C" na Mac računalu ili "Ctrl + C" na računalu da biste kopirali e.


HTML Kalkulator

Rezultat je

Dio 3 Izrada kalkulatora




  1. Otvorite e-datoteku na računalu. Postoji mnogo programa koje možete koristiti, ali zbog kvalitete preporuča se korištenje Uređivanja ili Bilježnice.
    • Na Mac računalu samo kliknite povećalo u gornjem desnom kutu zaslona da biste otvorili Spotlight. Nakon otvaranja utipkajte Uređivanje i kliknite na program koji bi trebao biti odabran plavom bojom.
    • Na PC-u kliknite gumb početak dolje lijevo. U traku za pretraživanje upišite blokčić za bilješke i kliknite na aplikaciju koja bi se trebala pojaviti u rezultatima.


  2. Zalijepite HTML kod u dokument.
    • Na Mac računalu samo kliknite tijelo dokumenta i pritisnite "Command + V", Tada biste trebali kliknuti na format pri vrhu ekrana i zatim dalje Prikaži u jednostavnom e nakon lijepljenja koda.
    • Na PC-u kliknite kućište dokumenta i zalijepite ga pritiskom na "Ctrl + V".


  3. Spremite datoteku. Samo kliknite na gumb datoteka u gornjem lijevom dijelu prozora, a zatim dalje Spremi kao ... na PC-u ili Spremi ... na Macu u padajućem izborniku koji se pojavi.


  4. Dodajte HTML proširenje. Jednom u izborniku upišite naziv datoteke nakon čega slijedi ".html" prije klika rekord, Na primjer, ako želite ovu datoteku nazvati "moj prvi kalkulator", možete joj je dati kao ime: "MyPremierCalculette.html".

Dio 4 Korištenje kalkulatora



  1. Pronađite HTML datoteku. Jednostavno upišite naziv datoteke u središtu pažnje na Macu ili u traci za pretraživanje izbornika Windows Start. Proširenje datoteke nije potrebno tipkati.


  2. Kliknite na nju da biste je otvorili. Vaš zadani preglednik trebao bi otvoriti kalkulator na novoj kartici.


  3. Kliknite na gumbe kako biste ga koristili. Rezultati vaših izračuna trebali bi se pojaviti u traci predviđenoj za tu svrhu.

Kako izbrisati RW CD

Ellen Moore

Svibanj 2024

Pročitajte ovaj članak da bi te aznali kako izbri ati CD-RW (na koji e može prepi ivati) pomoću Window ili Mac računara. Na CD-R to ne možete učiniti. Metoda 1 od 2: Bri anje podataka u u tavu Window ...

Ogrebotine i udubljenja mogu ugroziti izgled aluminij kih naplataka u vašem automobilu. Ali ve dok je šteta lagana, možete je popraviti ami. Prije popravaka temeljito oči tite kotače kako bi te bili i...

Više Detalja