Как сделать счетчик в html

Использование CSS счетчиков при вёрстке

В программировании счетчик – это переменная, содержащая значение, которое увеличивается в соответствии с настраиваемыми правилами. У счетчиков много вариантов применения: например, они помогают отслеживать циклы путем сохранения количества итераций. Обычно счетчики используются в языках программирования и традиционно не включаются в синтаксис каскадных таблиц стилей (CSS). До появления современного CSS отслеживание элементов для стилизации выполнялось либо вручную в разметке, либо с помощью JavaScript. Но теперь CSS предлагает хорошо поддерживаемые счетчики, которые могут отслеживать приращение без JavaScript.

В этом мануале вы узнаете, что такое счетчики CSS, и научитесь использовать их для нумерации элементов section в HTML документе и для подсчета количества строк в элементе table.

Требования

Для работы вам на локальном компьютере нужен HTML-файл index.html, к которому вы можете получить доступ из веб-браузера.

Если вы новичок в HTML, попробуйте выполнить всю серию статей Создание веб-сайта с помощью HTML.

Автоматическая нумерация разделов сайта

Чтобы понять, как работают счетчики CSS, давайте сначала создадим таблицу стилей, с помощью которой позже мы сможем присвоить порядковый номер нескольким элементам section в HTML-документе. Используя счетчики, мы сможем последовательно нумеровать каждый новый раздел.

Сначала откройте файл index.html в текстовом редакторе:

Вставьте в этот файл следующий код HTML, чтобы создать семантическую структуру сайта (в нашем примере это будет короткая справка о рептилиях):

Introduction to CSS Counters

Ratings

Insert a table with reptile ratings on it.

Alligators

Insert facts about alligators here.

Turtles

Insert facts about turtles here.

Snakes

Insert facts about snakes here.

В этом коде с помощью элемента section мы создали 4 раздела сайта с заголовками h2. Мы также добавили в head элемент link, который связывает документ с файлом CSS counter.css (мы скоро создадим его).

Сохраните и закройте файл. Откройте index.html в своем браузере, и вы увидите:

Ratings

Insert a table with reptile ratings on it…

Alligators

Insert facts about alligators here…

Turtles

Insert facts about turtles here…

Snakes

Insert facts about snakes here…

Чтобы пронумеровать каждый раздел в этом HTML-документе, вы можете добавить к каждому заголовку h2 номер вручную, прямо в разметке:

1. Ratings

Insert a table with reptile ratings on it.

2. Alligators

Insert facts about alligators here.

Хотя это отличное решение, если на вашем сайте есть небольшое фиксированное количество разделов. Но если сайт содержит десятки или даже сотни разделов, нумеровать их вручную слишком сложно и долго. И задача становится только сложнее, если вам нужно изменить порядок разделов.

Чтобы автоматизировать нумерацию, вы можете использовать счетчики CSS.

Создайте файл counter.css в том же каталоге, что и index.html, и откройте его:

Счетчики в CSS ведут себя как переменные в традиционных языках программирования. Чтобы использовать CSS счетчик, его нужно сначала инициализировать – присвоить имя и начальное значение.

Добавьте в свой файл следующий код:

body counter-reset: sectionCounter ;
>

В этом коде мы использовали counter-reset для инициализации счетчика sectionCounter. На данный момент его значение равно 0.

Вы также можете явно объявить инициализированное значение, передав целое число свойству counter-reset после имени счетчика. Например:

counter-reset: sectionCounter 2

Это инициализирует счетчик sectionCounter с начальным значением 2. Если целочисленное значение не указано, используется значение счетчика по умолчанию – 0.

Теперь, когда мы инициализировали счетчик, можно настроить его приращение. Номер каждого раздела счетчик должен увеличить на 1. Для этого добавьте следующий выделенный код:

body counter-reset: sectionCounter;
>
section < counter-increment: sectionCounter; >

Тут мы присвоили всем элементам section свойство counter-increment. Теперь каждый раз, когда CSS встретит элемент section, он увеличит счетчик. Если задать свойству значение sectionCounter, значение счетчика sectionCounter будет увеличиваться. По умолчанию счетчик увеличивается на единицу, но если вы хотите указать другой шаг приращения, вы можете добавить целое число после sectionCounter (через пробел).

Теперь, когда счетчик инициализирован и логика приращения установлена, вы можете проверить его. Используйте свойство content, чтобы добавить значение к заголовку h2:

body counter-reset: sectionCounter;
>
section counter-increment: sectionCounter;
>
h2::before < content: counter(sectionCounter) «. «; >

Мы использовали псевдоэлемент ::before, чтобы добавить элемент перед каждым заголовком h2. Чтобы установить контент нового элемента, мы использовали свойство content в сочетании с функцией counter(). Эта функция возвращает значение sectionCounter в виде строки.

Передача второй строки в content приведет к конкатенации строки, поэтому будет выведено значение sectionCounter, за которым следует точка и пробел.

Сохраните и закройте файл. Обновите страницу в браузере, и вы увидите пронумерованные заголовки разделов:

1. Ratings

Insert a table with reptile ratings on it…

2. Alligators

Insert facts about alligators here…

3. Turtles

Insert facts about turtles here…

4. Snakes

Insert facts about snakes here…

Еще один важный момент: этот счетчик невосприимчив к добавлению, удалению и изменению новых разделов, поэтому вам не придется заново нумеровать их, если вы измените их порядок.

Чтобы посмотреть, как это работает, откройте свой HTML-файл:

Поменяйте местами разделы Turtles и Snakes:

Ratings

Insert a table with reptile ratings on it.

Alligators

Insert facts about alligators here.

Snakes

Insert facts about snakes here.

Turtles

Insert facts about turtles here.

Сохраните и закройте файл. Перезагрузите браузер, и вы обнаружите такой результат:

1. Ratings

Insert a table with reptile ratings on it…

2. Alligators

Insert facts about alligators here…

3. Snakes

Insert facts about snakes here…

4. Turtles

Insert facts about turtles here…

В этом разделе вы использовали CSS счетчики для автоматизации нумерации разделов в HTML-документе. Далее мы рассмотрим пример использования элемента table для суммирования вычислений.

Подсчет количества строк в таблице

Счетчики CSS можно использовать не только для автоматизации нумерации в HTML документе, но и для любой задачи, которая включает периодическое увеличение. Чтобы посмотреть, как это работает, мы используем счетчики для определения количества строк в элементе table, а затем отобразим итоговую сумму в таблице.

Подсчет количества строк или элементов tr в table работает аналогично нумерации элементов section в предыдущей части руководства. Главное отличие – в том, что при подсчете общего количества важно общее значение, а при нумерации – значение для каждой отдельной строки.

Для начала вам понадобится таблица для работы. Откройте свой HTML-файл:

Добавьте следующее после раздела Ratings:

Introduction to CSS Counters

Ratings

Reptile	Rating
Alligator	9001
Turtle	223
Snake	3.14
Rows

Alligators

Insert facts about alligators here.

Элемент table создает таблицу; элемент tr нужен для определения строк таблицы, а td – для заполнения строки данными. Обратите внимание на использование thead, tbody и tfoot. Эти элементы опциональны, но они группируют строки в семантические разделы, которые можно использовать для более точного нацеливания (в разделе tbody) и пропуска строк в верхнем или нижнем колонтитуле. Атрибуты border и cellpadding позволяют придать таблице базовый стиль.

Сохраните и выйдите из файла index.html. Обновите страницу в браузере, и вы увидите следующее:

1. Ratings

Reptile	Rating
Alligator	9001
Turtle	223
Snake	3.14
Rows

Insert a table with reptile ratings on it…

2. Alligators

Insert facts about alligators here…

3. Turtles

Insert facts about turtles here…

4. Snakes

Insert facts about snakes here…

Теперь откройте свой файл CSS:

Как и ранее, вам нужно инициализировать счетчик с нулевым значением. Но на этот раз давайте назовем его rowCounter:

body counter-reset: sectionCounter;
counter-reset: rowCounter;
>
section counter-increment: sectionCounter;
>
h2::before content: counter(sectionCounter) «. «;
>

Для каждой строки или элемента tr в tbody нужно установить counter-increment:

body counter-reset: sectionCounter;
counter-reset: rowCounter;
>
section counter-increment: sectionCounter;
>
h2::before content: counter(sectionCounter) «. «;
>
table tbody tr < counter-increment: rowCounter; >

Селектор table tbody tr выбирает все элементы tr в tbody, а затем идет свойство counter-increment, но на этот раз со счетчиком rowCounter.

Теперь добавьте окончательное значение счетчика в столбец с классом total:

body counter-reset: sectionCounter;
counter-reset: rows;
>
section counter-increment: sectionCounter;
>
h2::before content: counter(sectionCounter) «. «;
>
table tbody tr counter-increment: rowCounter;
>
table .total::before < content: counter(rowCounter); >

Как и раньше, мы использовали псевдоэлемент ::before, чтобы добавить значение rowCounter в качестве новой строки. Поскольку он объявляется после увеличения счетчика, он сообщает общее количество строк.

Сохраните и закройте CSS файл, а затем перезагрузите страницу в браузере, чтобы проверить результат:

1. Ratings

Reptile	Rating
Alligator	9001
Turtle	223
Snake	3.14
Rows	3

Insert a table with reptile ratings on it…

2. Alligators

Insert facts about alligators here…

3. Turtles

Insert facts about turtles here…

4. Snakes

Insert facts about snakes here…

Теперь ваша таблица всегда будет сообщать, сколько строк в ней содержится. Добавление или удаление строк в разметке будет влиять на итоговое значение. Это работает даже при использовании JavaScript для управления DOM.

Заключение

Счетчики в CSS позволяют отображать значения, которые увеличиваются с появлением в HTML-документе определенных элементов. Во многих случаях это может полностью устранить необходимость внедрения JavaScript на страницу, что делает счетчики идеальным решением для легких веб-проектов, которые не нуждаются в интерактивности. Однако обратите внимание: подобное использование CSS стирает грань между контентом и дизайном. Более крупные приложения нуждаются в четком разделении таких вещей, иначе ими трудно управлять. По этой причине использовать счетчики в более сложных приложениях JavaScript не рекомендуется.

Создаём счётчик лайков

Мяу! Хочу знать, сколько человек лайкнули новость. Сделай счётчик!

Нет предела совершенству и хотелкам босса! Нам предстоит доработать систему лайков. Сейчас пользователь может ставить и отменять свои лайки, кликая на «сердечко» под картинкой в новости. Но при этом не учитывается и не показывается, сколько человек лайкнули новость. Исправим это, добавив счётчик.

Кнопка «сердечко» сохранена в переменной heart . Когда пользователь ставит лайк, кнопке добавляется класс added , и «сердечко» становится полностью закрашенным. Когда лайк отменяют, класс added убирается, и кнопка возвращается в первоначальное состояние. За переключение класса отвечает метод classList.toggle , мы с ним уже знакомы. Для отображения числа лайков на странице верстальщик подготовил элемент с классом likes-number .

Вот как кнопка выглядит в разметке:

Чтобы хранить количество лайков, нам понадобится переменная-счётчик. Её значением будет число.

// Присвоим переменной значение — число let number = 7;

Обратите внимание, мы не оборачиваем числа в кавычки.

Назовём переменную-счётчик counter и присвоим ей значение 0 — пока никто не кликнул, лайков нет. После этого выведем значение счётчика на страницу с помощью свойства textContent элемента с классом likes-number . В части стартового тренажёра мы уже работали с текстовым содержимым элементов.

Перейти к заданию

index.html

Как создать счетчик

@big-vl, Согласно правилам форума, вопросы не должны сводиться к решению либо завершению учебных заданий за учащихся. Пожалуйста, уточните, что вы сделали сами и что не получилось.

25 июн 2013 в 18:34

как считать время сколько прошло я так понимаю через if сравнивать я java не очень знаю но php более менее вот и возникают вопросы

25 июн 2013 в 18:37

java тут не причем, зачем через if, вам нужен setTimeOut, сам счетчик меняйте так: document.getElementById(‘cell’).innerHTML=parseInt(document.getElementById(‘cell’).innerHTML)+10;

25 июн 2013 в 18:42

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Напишите функцию, которая увеличивает таймер один раз, а потом передайте её в качестве параметра в метод setInterval .

Для наглядности счётчик в примере обновляется раз в две секунды.

var updateTimer = function() < var cell = document.getElementById('cell'); var count = Number(cell.innerHTML); cell.innerHTML = count += 1; >; setInterval(updateTimer, 2000);

Отслеживать
ответ дан 18 сен 2015 в 18:17
installero installero
1,076 7 7 серебряных знаков 22 22 бронзовых знака

setInterval('NewCell()', 1000); function NewCell()

Отслеживать
ответ дан 25 июн 2013 в 20:20
avengerweb avengerweb
1,565 3 3 золотых знака 14 14 серебряных знаков 45 45 бронзовых знаков
Не делайте так больше с setInterval . Можно просто писать: setInterval(function()< . >,1000)
25 июн 2013 в 20:26
Можно, не делать? Почему? По мне, удобнее создать функцию, для наглядности.
25 июн 2013 в 20:40
Потому что передача строки в первый параметр setInterval/setTimeout эквивалентно eval()
25 июн 2013 в 20:52
а как лучше останавливать счетчик?
25 июн 2013 в 21:15
мне кажется что avengerweb прав так как я смогу потом сделать setInterval(‘NewCell()’, 0);
25 июн 2013 в 21:15

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.