АКЦЫЯ: бясплатныя месячныя курсы па стварэнні сайтаў
на выбар: вёрстка, JavaScript, PHP, Python або фрэймворкі. Сёння апошні дзень для запісу! Націскай!
110 of 133 menu

Тэг meter

Тэг meter выкарыстоўваецца для вываду некаторага значэння ў прыгожа аформленым выглядзе.

Знешні выгляд тэга ўяўляе сабой часткова або цалкам зафарбаваную палоску. Палоска можа быць зялёнай, жоўтай або чырвонай (колер палоскі залежыць ад значэнняў атрыбутаў, аб гэтым будзе ніжэй):

Тэг meter варта выкарыстоўваць, да прыкладу, у наступнай сітуацыі: вы хочаце вывесці на экран бягучае значэнне тэмпературы, пры гэтым тэмпература можа змяняцца ад 0 да 100. Вам варта паказаць наступныя атрыбуты: атрыбут value павінен паказваць бягучае значэнне тэмпературы, атрыбут min - мінімальна магчымае значэнне (у нашым выпадку 0), атрыбут max - максімальна магчымае (у нашым выпадку 100).

У залежнасці ад значэння атрыбута value палоска будзе маленькай або вялікай. Калі паказаць value у значэнні 10, то палоска будзе маленькай (бо 10 вельмі блізка да мінімуму - да нуля), калі ж паказаць значэнне 90, то палоска будзе вялікай (бо 90 блізка да максімуму - да 100). Калі паказаць значэнне 100 - то палоска занясе ўвесь элемент (бо значэнне дасягнула максімуму).

Калі паказаць значэнне, большае, чым 100, то палоска ўсё роўна занясе ўвесь элемент. Калі ж паказаць 0 і менш - то палоскі зусім не будзе.

Прыклад

Значэнне атрыбута value маленькае:

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

:

Прыклад

Значэнне атрыбута value вялікае:

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

:

Прыклад

Значэнне атрыбута value сярэдняе:

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

:

Прыклад

Значэнне атрыбута value роўна максімальнаму:

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

:

Прыклад

Значэнне атрыбута value роўна мінімальнаму:

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

:

Прыклад

Значэнне атрыбута value больш максімальнага:

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

:

Прыклад

Значэнне атрыбута value менш мінімальнага:

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

:

Дадаём атрыбуты low і high

У тэгу meter ёсць яшчэ 2 атрыбута: low і high.

Разгледзім іх працу на прыкладзе тэмпературы. Нагадаю, што нашая мінімальная тэмпература роўная 0, а максімальная - 100. Хай цяпер мы хочам зрабіць наступныя дыяпазоны - "халодная тэмпература" ад 0 да 20, "нармальная" ад 20 да 80 і "гарачая" ад 80 да 100.

Каб задаць халодную тэмпературу, пакажам значэннем атрыбута low лік 20. Атрымаецца, што ад нуля (гэта значэнне атрыбута min) да 20 (значэнне атрыбута low) у нас вобласць нізкіх значэнняў.

Каб задаць гарачую тэмпературу, пакажам значэннем атрыбута high лік 80. Атрымаецца, што ад 80 (гэта значэнне атрыбута high) да 100 (значэнне атрыбута max) у нас вобласць высокіх значэнняў.

Нармальная тэмпература будзе ад 20 (гэта значэнне атрыбута low) да 80 (значэнне атрыбута high). Гэтую вобласць назавём вобласцю нармальных значэнняў.

Цяпер, у залежнасці ад таго, у якую вобласць трапляе значэнне атрыбута value, палоска будзе афарбоўвацца ў зялёны або жоўты колер. Зялёны будзе, калі мы трапілі у вобласць нармальных значэнняў, а жоўты - калі ў вобласць высокіх або нізкіх значэнняў.

Прыклад

Значэнне атрыбута value трапляе ў вобласць нізкіх значэнняў:

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

:

Прыклад

Значэнне атрыбута value трапіць у вобласць нармальных значэнняў:

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

:

Прыклад

Значэнне атрыбута value трапіць у вобласць высокіх значэнняў:

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

:

Дадаём атрыбут optimum

Атрыбут optimum вызначае аптымальнае значэнне. Для нашага прыкладу аптымальнай можа быць халодная тэмпература, нармальная або гарачая - на ваш выбар. Выкажам здагадку, што вы пакажаце, што аптымальная тэмпература халодная. Цяпер, у залежнасці ад значэння атрыбута value (гэта значыць ад бягучай тэмпературы) колер палоскі будзе зялёны, жоўты або чырвоны.

Калі бягучая тэмпература трапляе ў вобласць аптымальных тэмператур (а мы паказалі, што аптымальная - халодная), то колер палоскі будзе зялёны. Калі бягучая тэмпература трапляе ў суседні з аптымальным дыяпазон (у нашым выпадку гэта нармальная тэмпература), то палоска стане жоўтай. Калі ж бягучая тэмпература трапляе не ў суседні з аптымальным дыяпазон (у нашым выпадку гэта гарачая тэмпература), то палоска стане чырвонай.

Аналагічным чынам усё будзе адбывацца, калі аптымальнай тэмпературай паказаць гарачую. У гэтым выпадку, калі бягучая тэмпература трапіла ў вобласць гарачых тэмператур - палоска будзе зялёнай, калі трапіла ў вобласць нармальных - жоўтай, калі ў вобласць халодных - чырвонай.

Калі аптымальнай паказаць нармальную тэмпературу, то палоска можа быць толькі зялёнай (калі бягучая тэмпература трапіла ў нармальную) або жоўтай (калі бягучая тэмпература трапіла ў суседа нармальнай тэмпературы, а гэта гарачая або халодная).

Каб паказаць, які дыяпазон з'яўляецца аптымальным, трэба паказаць у якасці значэння атрыбута optimum любы лік з гэтага дыяпазону.

У прыкладах ніжэй значэнне атрыбута optimum трапляе ў вобласць нізкіх значэнняў (гэта значыць халодных тэмператур).

Прыклад

Значэнне атрыбута value трапляе ў вобласць нізкіх значэнняў:

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

:

Прыклад

Значэнне атрыбута value трапляе ў вобласць нармальных значэнняў:

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

:

Прыклад

Значэнне атрыбута value трапляе ў вобласць высокіх значэнняў:

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

:

У прыкладах ніжэй значэнне атрыбута optimum трапляе ў вобласць высокіх значэнняў (гэта значыць гарачых тэмператур).

Прыклад

Значэнне атрыбута value трапляе ў вобласць нізкіх значэнняў:

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

:

Прыклад

Значэнне атрыбута value трапляе ў вобласць нармальных значэнняў:

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

:

Прыклад

Значэнне атрыбута value трапляе ў вобласць высокіх значэнняў:

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

:


У прыкладах ніжэй значэнне атрыбута optimum трапляе ў вобласць нармальных значэнняў (гэта значыць нармальных тэмператур).

Прыклад

Значэнне атрыбута value трапляе ў вобласць нізкіх значэнняў:

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

:

Прыклад

Значэнне атрыбута value трапляе ў вобласць нармальных значэнняў:

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

:

Прыклад

Значэнне атрыбута value трапляе ў вобласць высокіх значэнняў:

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

:

Старыя браўзеры

Старыя браўзеры не змогуць паказаць тэг meter у прыгожым выглядзе і будуць выводзіць замест гэтага змесціва самога тэга:

<meter value="10" min="0" max="100">Гэты тэкст пакажацца ў старых браўзерах.</meter>

:

Атрыбуты

Значэнне атрыбутаў можа быць дробным і адмоўным лікам.

Атрыбут Апісанне
value Устанаўлівае бягучае значэнне. Абавязковы атрыбут.
min Задае мінімальна магчымае значэнне. Значэнне па змаўчанні: 0.
max Задае максімальна магчымае значэнне. Значэнне па змаўчанні: 1.
low Задае мяжу вобласці нізкіх значэнняў. Нізкія значэнні будуць ад ліку ў атрыбуце min да ліку ў атрыбуце low.
high Задае мяжу вобласці нізкіх значэнняў. Нізкія значэнні будуць ад ліку ў атрыбуце high да ліку ў атрыбуце max.
optimum Вызначае вобласць аптымальных значэнняў.

Глядзіце таксама

  • тэг progress,
    які стварае палосу загрузкі.
byenru