110 of 133 menu

Meter-elementti

Elementtiä meter käytetään jonkin arvon näyttämiseen kauniisti muotoiltuna.

Elementin ulkoasu on osittain tai kokonaan täytetty palkki. Palkki voi olla vihreä, keltainen tai punainen (väri riippuu attribuuttien arvoista, siitä lisää myöhemmin):

Elementtiä meter tulisi käyttää esimerkiksi seuraavassa tilanteessa: haluat näyttää nykyisen lämpötilan, kun lämpötila voi vaihdella 0 asteesta 100 asteeseen. Sinun tulee määrittää seuraavat attribuutit: attribuutin value tulee osoittaa nykyinen lämpötila, attribuutin min - minimiarvo (meidän tapauksessamme 0), attribuutin max - maksimiarvo (meidän tapauksessamme 100).

Attribuutin value arvosta riippuen palkki on pieni tai suuri. Jos value on asetettu arvoon 10, palkki on pieni (koska 10 on hyvin lähellä minimiä - nollaa), jos arvo on 90, palkki on suuri (koska 90 on lähellä maksimia - 100). Jos arvo on 100 - palkki täyttää koko elementin (koska arvo on saavuttanut maksimin).

Jos määrität arvon, joka on suurempi kuin 100, palkki täyttää silti koko elementin. Jos määrität 0 tai vähemmän - palkkia ei näy ollenkaan.

Esimerkki

Attribuutin value arvo on pieni:

<meter value="10" min="0" max="100"></meter>

:

Esimerkki

Attribuutin value arvo on suuri:

<meter value="90" min="0" max="100"></meter>

:

Esimerkki

Attribuutin value arvo on keskisuuri:

<meter value="50" min="0" max="100"></meter>

:

Esimerkki

Attribuutin value arvo on yhtä suuri kuin maksimi:

<meter value="100" min="0" max="100"></meter>

:

Esimerkki

Attribuutin value arvo on yhtä suuri kuin minimi:

<meter value="0" min="0" max="100"></meter>

:

Esimerkki

Attribuutin value arvo on suurempi kuin maksimi:

<meter value="110" min="0" max="100"></meter>

:

Esimerkki

Attribuutin value arvo on pienempi kuin minimi:

<meter value="-10" min="0" max="100"></meter>

:

Low- ja high-attribuuttien lisääminen

Elementissä meter on vielä 2 attribuuttia: low ja high.

Tarkastellaan niiden toimintaa lämpötilan esimerkillä. Muistutan, että meidän minimilämpötilamme on 0 ja maksimi - 100. Tehdään nyt seuraavat alueet - "kylmä lämpötila" 0:sta 20:een, "normaali" 20:sta 80:een ja "kuuma" 80:sta 100:een.

Määrittääksemme kylmän lämpötilan, asetamme attribuutin low arvoksi luvun 20. Saadaan, että nollasta (tämä on attribuutin min arvo) 20:een (attribuutin low arvo) on matalien arvojen alue.

Määrittääksemme kuuman lämpötilan, asetamme attribuutin high arvoksi luvun 80. Saadaan, että 80:sta (tämä on attribuutin high arvo) 100:een (attribuutin max arvo) on korkeiden arvojen alue.

Normaali lämpötila on 20:sta (tämä on attribuutin low arvo) 80:een (attribuutin high arvo). Tätä aluetta kutsutaan normaalien arvojen alueeksi.

Nyt, riippuen siitä, mihin alueeseen attribuutin value arvo osuu, palkki värjätään vihreäksi tai keltaiseksi. Vihreä tulee, jos osutaan normaalien arvojen alueeseen, ja keltainen - jos korkeiden tai matalien arvojen alueeseen.

Esimerkki

Attribuutin value arvo osuu matalien arvojen alueeseen:

<meter value="10" min="0" low="20" high="80" max="100"></meter>

:

Esimerkki

Attribuutin value arvo osuu normaalien arvojen alueeseen:

<meter value="50" min="0" low="20" high="80" max="100"></meter>

:

Esimerkki

Attribuutin value arvo osuu korkeiden arvojen alueeseen:

<meter value="90" min="0" low="20" high="80" max="100"></meter>

:

Optimum-attribuutin lisääminen

Attribuutti optimum määrittää optimaalisen arvon. Esimerkissämme optimaalinen voi olla kylmä lämpötila, normaali tai kuuma - valintasi mukaan. Oletetaan, että määrität, että optimaalinen lämpötila on kylmä. Nyt attribuutin value arvosta (eli nykyisestä lämpötilasta) riippuen palkin väri on vihreä, keltainen tai punainen.

Jos nykyinen lämpötila osuu optimaalisten lämpötilojen alueelle (ja määritimme, että optimaalinen on kylmä), palkin väri on vihreä. Jos nykyinen lämpötila osuu optimaalin viereiseen alueeseen (meidän tapauksessamme tämä on normaali lämpötila), palkki muuttuu keltaiseksi. Jos nykyinen lämpötila osuu ei-viereiseen alueeseen optimaaliin verrattuna (meidän tapauksessamme tämä on kuuma lämpötila), palkki muuttuu punaiseksi.

Vastaavasti kaikki tapahtuu, jos optimaalisena lämpötilana määritetään kuuma. Tässä tapauksessa, jos nykyinen lämpötila osuu kuumien lämpötilojen alueelle - palkki on vihreä, jos osuu normaalien lämpötilojen alueelle - keltainen, jos kylmien lämpötilojen alueelle - punainen.

Jos optimaalisena määritetään normaali lämpötila, palkki voi olla vain vihreä (jos nykyinen lämpötila osuu normaalialueelle) tai keltainen (jos nykyinen lämpötila osuu normaalin lämpötilan viereiseen alueeseen, joka on kuuma tai kylmä).

Määrittääksesi, mikä alue on optimaalinen, tulee asettaa attribuutin optimum arvoksi mikä tahansa luku kyseiseltä alueelta.

Alla olevissa esimerkeissä attribuutin optimum arvo osuu matalien arvojen alueeseen (eli kylmiin lämpötiloihin).

Esimerkki

Attribuutin value arvo osuu matalien arvojen alueeseen:

<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>

:

Esimerkki

Attribuutin value arvo osuu normaalien arvojen alueeseen:

<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>

:

Esimerkki

Attribuutin value arvo osuu korkeiden arvojen alueeseen:

<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>

:

Alla olevissa esimerkeissä attribuutin optimum arvo osuu korkeiden arvojen alueeseen (eli kuumiin lämpötiloihin).

Esimerkki

Attribuutin value arvo osuu matalien arvojen alueeseen:

<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>

:

Esimerkki

Attribuutin value arvo osuu normaalien arvojen alueeseen:

<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>

:

Esimerkki

Attribuutin value arvo osuu korkeiden arvojen alueeseen:

<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>

:


Alla olevissa esimerkeissä attribuutin optimum arvo osuu normaalien arvojen alueeseen (eli normaaleihin lämpötiloihin).

Esimerkki

Attribuutin value arvo osuu matalien arvojen alueeseen:

<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>

:

Esimerkki

Attribuutin value arvo osuu normaalien arvojen alueeseen:

<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>

:

Esimerkki

Attribuutin value arvo osuu korkeiden arvojen alueeseen:

<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>

:

Vanhat selaimet

Vanhat selaimet eivät pysty näyttämään elementtiä meter kauniisti ja näyttävät sen sijaan elementin sisällön:

<meter value="10" min="0" max="100">Tämä teksti näkyy vanhoissa selaimissa.</meter>

:

Attribuutit

Attribuuttien arvo voi olla desimaaliluku tai negatiivinen luku.

Attribuutti Kuvaus
value Asettaa nykyisen arvon. Pakollinen attribuutti.
min Asettaa pienimmän mahdollisen arvon. Oletusarvo: 0.
max Asettaa suurimman mahdollisen arvon. Oletusarvo: 1.
low Asettaa matalien arvojen alueen rajan. Matalat arvot ovat attribuutin min arvosta attribuutin low arvoon.
high Asettaa korkeiden arvojen alueen rajan. Korkeat arvot ovat attribuutin high arvosta attribuutin max arvoon.
optimum Määrittää optimaalisten arvojen alueen.

Katso myös

  • elementti progress,
    joka luo latauspalkin.
Suomi
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Käytämme evästeitä verkkosivuston toiminnalle, analytiikalle ja personoinnille. Tietojen käsittely tapahtuu Tietosuojakäytännön mukaisesti.
hyväksy kaikki mukauta hylkää