Создайте простой счетчик кликов с помощью JavaScript
Счетчик кликов записывает количество кликов и отображает его на экране. Счетчик использует событие click JavaScript для увеличения значения счетчика. Мы можем использовать его в различных областях, в том числе в играх (для увеличения количества очков или очков) и в некоторых хаках для экономии времени. Давайте посмотрим на код для создания простого счетчика кликов в JavaScript.
Please enable JavaScript
Счетчик кликов на кнопке с использованием JavaScript
В коде мы увеличиваем значение переменной счетчика counterVal на 1 при каждом нажатии пользователем. Шаги следующие.
Мы создаем отображение счетчика в HTML с тегом <h3> и назначаем ему идентификатор counter-label , чтобы его можно было обновить из кода javascript с помощью document.getElementById() функция в javascript.
В HTML мы также добавляем пару кнопок. Одна кнопка с текстом Click Me , при нажатии на которую значение счетчика увеличивается на 1 . Точно так же в другой кнопке у нас есть текст Reset в HTML, который сбрасывает счетчик на 0 .
При нажатии кнопки кликни меня нам нужно увеличить значение счетчика. Для этого мы используем прослушиватель событий onclick . И вызовите функцию incrementClick() нажатием кнопки Click Me .
Внутри функции incrementClick() мы увеличиваем глобальную переменную counterVal на 1 и вызываем функцию updateDisplay .
При нажатии кнопки Сброс вызываем функцию resetCounter() . В этой функции мы сбрасываем значение глобального счетчика ( counterVal ) на 0 и вызываем функцию updateDisplay() .
В функции updateDisplay() мы отображаем полученное значение как параметр в теге <h3> , который содержит значение счетчика. Он использует функцию javascript document.getElementById() для запроса элемента HTML с идентификатором counter-label , а затем обновляет атрибут innerHTML с новым значением счетчика. Атрибут innerHTML дополнительно изменяет текст, отображаемый в интерфейсе графического пользовательского интерфейса HTML.
В приведенном выше примере кода отображается счетчик кликов, который увеличивается при нажатии кнопки. В большинстве случаев мы не всегда можем применять счетчик кликов к кнопке. Чтобы сделать его гибким, нам нужно будет поддерживать эту функцию для других элементов HTML, таких как div , li и т. Д. Почти все элементы HTML имеют событие click с обработчиком события onclick .
Счетчик кликов в div с использованием JavaScript
В играх в сценах не всегда есть кнопка для запуска приращения счетчика. В основном он может состоять из элементов HTML, таких как div . В таких случаях мы можем использовать обработчик события onclick тега div , чтобы зафиксировать щелчок для увеличения значения счетчика. См. Следующий пример кода.
Вы можете заметить, что в этом примере мы использовали div в строке <div onclick=»incrementClick()»>Click Me</div> . С этим изменением incrementClick() запускается по щелчку div вместо кнопки. Код будет отлично работать с HTML-тегами, такими как <li> , <a> , <div> и т. Д. Почти все HTML-теги, поддерживающие обработчики событий onclick , могут быть связаны с прослушивателем onclick и работать с ними аналогичным образом.
Счетчик кликов — беспрепятственный подход
Если мы реализуем счетчик кликов с беспрепятственным подходом в JavaScript, нам нужно будет удалить обработчик событий onclick в HTML и переместить его в код JavaScript. Однако структура кода выглядит немного иначе, обратите внимание на следующий пример кода.
Здесь мы привязываем события щелчка к коду JavaScript. Структура осталась прежней, за исключением того, что мы используем прослушиватель onclick для div Click Me и кнопки Reset . Эта привязка происходит во время выполнения. И к этому прослушивателю кликов мы привязываем наши определенные функции. Таким образом, код выглядит похожим и не претерпел особых изменений.
Замечания
Разница между беспрепятственным подходом состоит в том, что мы привязываем прослушиватель onclick в коде javascript, а не делаем это в HTML. Из одного только HTML будет сложно понять, если кнопке или div назначен обработчик события onclick .
При таком подходе код выглядит чище, поскольку все события onclick связываются и обрабатываются в JavaScript. Он сохраняет HTML в чистоте с разметкой, поскольку код JavaScript не вторгается в HTML.
Как сделать счетчик в html
Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.
Счётчики в CSS
Подробно разбираемся как браузер считает элементы и как этим управлять через CSS.
Время чтения: больше 15 мин
- Кратко
- counter-reset
- counter-increment
- counter-set
- counter() и counters()
- Наследование
- Создание счётчиков
- Вложенные счётчики и область применения
- Особенность списка <ol>
- Алексей Степанов советует
- Алёна Батицкая ,
- Даниил Хебок
Обновлено 22 февраля 2023
Кратко
Скопировать ссылку на секцию «Кратко» Скопировано
CSS-счётчики — это мощный инструмент для нумерации любых элементов страницы, не только списков.
Основные свойства для работы со счётчиками:
-
— создаёт счётчик; — увеличивает числовое значение счётчика; — устанавливает точное значение счётчика.
Помимо свойств, с помощью которых можно создавать счётчики и управлять ими, есть две основные функции для подставления значения счётчика: counter ( ) и counters ( ) .
counter — reset
Скопировать ссылку на секцию «counter-reset» Скопировано
Перед тем как воспользоваться значением счётчика, этот счётчик нужно создать. Счётчики создаются при помощи свойства counter — reset .
В качестве значения сначала указывается имя счётчика, а затем его начальное целочисленное значение.
Имена счётчиков чувствительны к регистру. Например, значения example и EXAMPLE — это два разных, не связанных между собой счётчика.
Нельзя использовать ключевые слова: none , initial , inherit , unset , default в качестве названий счётчиков.
Также счётчики подчиняются принципу каскада, например:
В таком случае применится только последнее CSS-правило для элемента <h1> .
Чтобы свойство counter — reset сработало для обоих счётчиков из примера выше необходимо указать их вместе через пробел:
Или вот такой пример:
В значении свойства counter — reset указаны два одинаковых счётчика, в таком случае будет учитываться только последний.
counter — increment
Скопировать ссылку на секцию «counter-increment» Скопировано
Чтобы значение счётчика начало увеличиваться на определённое значение от элемента к элементу необходимо указать свойство counter — increment .
Теперь каждый элемент <li> в документе будет увеличивать значение счётчика example на 2.
На элементе <ul> создадим счётчик example с начальным значением 0:
Укажем разные значения увеличения счётчика для каждого элемента <li> :
Как это работает будет более подробно расписано дальше. Но в конечном итоге пример выше выглядит так:
Если в значении свойства counter — increment встречается несколько счётчиков с одинаковым именем, они будут обрабатываться по порядку.
counter — set
Скопировать ссылку на секцию «counter-set» Скопировано
Вам неожиданно понадобилось изменить порядок нумерации элементов в списке, чтобы после 1 пункта шёл сразу 9? counter — set отлично подойдёт для этой задачи:
На элементе <ul> создадим счётчик example с начальным значением 0:
Укажем разные значения увеличения счётчика для каждого элемента <li> , а для элемента с классом second добавим ещё свойство counter — set :
Может показаться, что второй элемент с классом second должен иметь значение 12, а не 9, потому что на него применяются сразу два свойства counter — increment и counter — set , однако при вычислении значения используется определённый порядок.
Сначала выполняется свойство counter — increment и значение счётчика увеличивается на 3, но затем сразу же переписывается свойством counter — set устанавливая точное значение 9.
Если в значении свойства counter — set встречается несколько счётчиков с одинаковым именем, установится только последнее указанное значение.
Данное свойство пока не поддерживается в браузере Safari.
counter ( ) и counters ( )
Скопировать ссылку на секцию «counter() и counters()» Скопировано
Свойства counter — increment и counter — set не отображают фактическое значение счётчиков. Эти свойства только управляют ими.
Но когда речь заходит о том, чтобы отобразить значения того или иного счётчика на помощь приходят функции counter ( ) и counters ( ) .
Разница между ними будет описана подробнее дальше.
Возьмём один из примеров который уже был представлен выше:
На элементе <ul> создадим счётчик example с начальным значением 0:
Укажем разные значения увеличения счётчика для каждого элемента <li> :
Теперь, чтобы значения счётчика начали отображаться в документе воспользуемся функцией counter ( ) .
Подставляем значение счётчика example на каждый псевдоэлемент : : marker элемента <li> :
В обоих функциях есть необязательный аргумент, который указывает стиль счётчика, например, вместо использования десятичной системы счисления — данное значение устанавливается по умолчанию, можно указать строчную римскую нумерацию, то есть тип lower — roman :
О других стилях счётчика можно посмотреть в доке по свойству list — style — type .
Основные термины
Скопировать ссылку на секцию «Основные термины» Скопировано
- Набор счётчиков — это коллекция неповторяющихся между собой счётчиков, которые имеет элемент. Эта коллекция пополняется наследуемыми счётчиками от другого элемента и счётчиками которые элемент создал сам.
Изначально каждый элемент или псевдоэлемент в документе имеет пустой набор счётчиков.
Каждый счётчик, который попадает в эту коллекцию, имеет внутри себя следующие данные:
- имя — идентификатор, который указывается при создании счётчика;
- создатель — элемент, который его создал;
- значение — целочисленное значение счётчика.
Представить это можно так:
- Явный счётчик — это счётчик который создали вы.
- Неявный счётчик — это счётчик который автоматически создаётся браузером.
- Последний счётчик — это самый последний счётчик с указанным именем из набора счётчиков.
Порядок вычисления значения
Скопировать ссылку на секцию «Порядок вычисления значения» Скопировано
Значения счётчика из набора на каждом отдельном элементе могут быть разными. Значение счётчика на текущем элементе вычисляется поэтапно:
- Сначала наследуется набор счётчиков.
- Если на элементе указано свойство counter — reset — создаётся новый счётчик.
- Если на элементе указано свойство counter — increment — значение счётчика увеличивается.
- Если на элементе указано свойство counter — set — устанавливается точное значение счётчика.
И только теперь, после всех вычислений, значением счётчика можно воспользоваться через функции counter ( ) и counters ( ) .
Создание и наследование счётчиков
Скопировать ссылку на секцию «Создание и наследование счётчиков» Скопировано
Наследование
Скопировать ссылку на секцию «Наследование» Скопировано
Элемент наследует свой начальный набор счётчиков от своего родителя и предыдущего одноуровневого элемента.
Затем он берёт значения этих счётчиков из набора счётчиков предыдущего элемента в порядке дерева. Предыдущий элемент может быть:
- родителем;
- одноуровневым элементом;
- дочерним элементом предыдущего одноуровневого элемента.
Создадим счётчик на элементе <ul> и проследим как счётчик будет наследоваться элементами, которые находятся внутри.
На элементе <ul> создаём счётчик c именем new и начальным значением 0:
Теперь в наборе у элемента <ul> есть один, созданный им же счётчик с именем new .
Укажем, чтобы на элементах <li> с классами first и second , и на элементе <p> с классом paragraph значение счётчика new увеличивалось на 1:
Первый дочерний элемент с классом first наследует свой начальный набор счётчиков от родительского элемента <ul> .
Также <ul> является предшествующим элементом в порядке дерева, поэтому элемент с классом first наследует также значение счётчика new — 0, а затем сразу же увеличивает его на 1.
Теперь значение счётчика new на элементе <li> с классом first равно 1.
Тоже самое происходит с элементом у которого класс paragraph . Он наследует счётчик new от своего родительского элемента с классом first , а также его значение — 1, а затем сразу же увеличивает его на 1.
Теперь значение счётчика new на элементе <p> с классом paragraph равно 2.
Однако элемент с классом second немного отличается. Он наследует счётчик new от своего предыдущего одноуровневого элемента <li> с классом first , но вместо того чтобы наследовать значение 1, он наследует значение 2 от элемента с классом paragraph , предыдущего элемента в порядке дерева, а затем сразу же увеличивает его на 1.
Теперь значение счётчика new на элементе <li> с классом second равно 3.
Подставим значение счётчика new в псевдоэлемент : : before для элемента <p> , и в псевдоэлемент : : marker для элементов с классами first и second чтобы пронумеровать их:
Создание счётчиков
Скопировать ссылку на секцию «Создание счётчиков» Скопировано
После наследования набора счётчиков от предыдущего одноуровневого и родительского элементов происходит создание счётчиков.
Создавать новые счётчики может не только свойство counter — reset .
Если вы применили свойство counter — increment или counter — set , или воспользовались функцией counter ( ) или counters ( ) и указали имя несуществующего счётчика:
В таком случае на элементе сначала создастся новый счётчик с именем new и начальным значением 0. После создания счётчика свойства counter — increment и counter — set , и функции counter ( ) и counters ( ) начнут действовать как обычно.
Если элемент уже содержит унаследованный счётчик с именем n , который был создан одноуровневым предыдущим элементом, и вы создаёте на элементе счётчик с точно таким же именем n , то этот счётчик заменит унаследованный.
Рассмотрим пример. Создадим элемент <div> с 3 вложенными элементами <p> и проследим как счётчик будет наследоваться элементами.
На элементе <div> создаём счётчик c именем new и начальным значением 0:
Теперь у элемента <div> в наборе имеется один, созданный им же счётчик с именем new .
Создаём ещё один счётчик, но уже на элементе <p> . Назовём его paragraph :
Первый дочерний элемент с классом first наследует свой начальный набор счётчиков от родительского элемента <div> и также создаёт собственный счётчик с именем paragraph .
Теперь у элемента <p> с классом first в наборе два счётчика: один унаследованный от родительского элемента <div> , второй собственно созданный счётчик.
Так как <div> является предшествующим элементом в порядке дерева, элемент с классом first наследует также значение счётчика new — 0.
Следующий элемент <p> с классом second унаследует точно такой же набор счётчиков от предыдущего одноуровневого элемента <p> с классом first , но как только это произойдёт он перезапишет счётчик paragraph элемента <p> c классом first на собственно созданный счётчик.
Последний элемент <p> с классом third сделает абсолютно тоже самое.
Увеличим элементу с классом second значение счётчика paragraph :
Подставим значение счётчика paragraph в псевдоэлемент : : before элементов с классами first , second и third чтобы пронумеровать их:
Так как счётчик paragraph увеличивался при помощи свойства counter — increment только на элементе с классом second , значение счётчика на следующих элементах <p> будет 1.
Вложенные счётчики и область применения
Скопировать ссылку на секцию «Вложенные счётчики и область применения» Скопировано
Представим ещё одну ситуацию. Если элемент уже содержит унаследованный счётчик с именем n , который был создан родительским элементом (любым, необязательно родительским элементом текущего элемента), и вы создаёте на элементе счётчик с точно таким же именем n , в таком случае этот счётчик вложится в уже существующий счётчик.
Представить это можно так:
Рассмотрим пример. Создадим многоуровневый список создав счётчик на элементе <ul> и проследим как счётчик будет наследоваться элементами, которые находятся внутри.
На элементе <ul> создаём счётчик c именем new и начальным значением 0:
Теперь у элемента <ul> с классом first — list в наборе имеется один счётчик созданный им же.
Укажем, чтобы на элементе <li> значение счётчика new увеличивалось на 1:
Первый дочерний элемент с классом one наследует свой начальный набор счётчиков от родительского элемента <ul> c классом first — list .
Также <ul> с классом first — list является предшествующим элементом в порядке дерева, поэтому элемент с классом one наследует также значение счётчика new — 0, а затем сразу же увеличивает его на 1.
Теперь значение счётчика new на элементе <li> с классом one равно 1.
В элементе <li> с классом one появляется ещё один элемент <ul> с классом second — list .
Элемент <ul> с классом second — list наследует счётчик new от своего родительского элемента с классом one , после этого он создаёт собственный счётчик с именем new , но так как счётчик с таким же именем, созданный родительским элементом <ul> с классом first — list , уже есть в наборе, то этот счётчик не будет удалён, а вложится в уже существующий.
У элемента <ul> с классом second — list получается примерно следующий набор счётчиков:
На этом моменте область действия счётчика new элемента <ul> с классом first — list заканчивается. И если применить свойства counter — increment или counter — set чтобы повлиять на значение счётчика new , меняться будет только последний счётчик с именем new в наборе.
Первый дочерний элемент с классом one — one , элемента <ul> с классом second — list , наследует свой начальный набор счётчиков от родительского элемента.
Также <ul> c классом second — list является предшествующим элементом в порядке дерева, поэтому элемент с классом one — one наследует также значение счётчика new — 0, а затем сразу же увеличивает его на 1. Но увеличивает не счётчик созданный элементом <ul> с классом first — list , а счётчик, который создал его родительский элемент <ul> с классом second — list .
Элемент <li> с классом one — two наследует счётчик new от своего предшествующего одноуровневого элемента с классом one — one , а также его значение — 1, а затем сразу же увеличивает его на 1. Но опять же, увеличивает не счётчик созданный элементом <ul> с классом first — list , а счётчик, который создал его родительский элемент <ul> с классом second — list .
Самый последний элемент <li> с классом two наследует набор счётчиков от предыдущего одноуровневого элемента — элемента <li> с классом one .
Так как предыдущий элемент в порядке дерева — это элемент <ul> с классом second — list , элемент с классом two наследует значение счётчика new , но только не того счётчика new , который создал элемент <ul> с классом second — list , а счётчика который создал элемент <ul> с классом first — list и затем сразу же увеличивает его на 1.
Теперь значение счётчика new на элементе <li> с классом two равно 2.
Разница между counter ( ) и counters ( )
Скопировать ссылку на секцию «Разница между counter() и counters()» Скопировано
В итоговой демке выше нумерация (значение счётчиков) была выведена при помощи функции counters ( ) .
Функция counters ( ) выводит значения всех счётчиков с указанным именем в наборе:
Вторым аргументом функции counters ( ) важно указать разделитель в виде строки. Эта строка будет разделять значения всех счётчиков с указанным именем.
Функция counter ( ) выводит значение только последнего счётчика с указанным именем.
Выведем ту же самую демку, но используем функцию counter ( ) :
Свойства display и content
Скопировать ссылку на секцию «Свойства display и content» Скопировано
Свойства counter — reset , counter — increment и counter — set не будут действовать на элементах которые не создают блок. Например на элементах с display : none или псевдоэлементах с content : none .
На элементе <div> создаём счётчик c именем new и начальным значением 0:
Укажем, чтобы на элементах <p> с классами first и second значение счётчика new увеличивалось на 1:
Далее укажем основные свойства для элементов с классами display и content , а также укажем увеличение значения счётчика new на 1:
Пронумеруем элементы с классами first и second через функцию counter ( ) :
Как видно элемент <p> с классом display и псевдоэлемент : : before элемента с классом content не увеличили значение счётчика new .
Элементы с visibility : hidden не подчиняются этому правилу и увеличивают значение счётчика.
Неявный счётчик элементов списка
Скопировать ссылку на секцию «Неявный счётчик элементов списка» Скопировано
В дополнение к любым явно определённым в CSS счётчикам, любые элементы с display : list — item автоматически имеют в своём наборе специальный неявный счётчик с именем list — item .
Например, элементы <li> по умолчанию имеют свойство display со значением list — item .
Счётчиком list — item можно управлять так же как и обычным явным счётчиком.
Если в значении свойства counter — increment явно не указывается значение на которое счётчик list — item будет увеличиваться от элемента к элементу, то он автоматически увеличивается браузером на 1 для каждого элемента со свойством display : list — item .
Именно поэтому, когда вы объявляете список <ol> элементы <li> в списке автоматически нумеруются.
Даже если вы попытаетесь указать свойство counter — increment со значением none на элементе <li> неявный счётчик list — item всё равно продолжит нумерацию. Эта защита сделана специально.
Однако если вы укажете другое значение, например:
автоматическое увеличение счётчика list — item будет переопределено и теперь его значение будет увеличиваться на 2.
Вы также можете указать значение 0, тогда счётчик list — item вообще перестанет увеличиваться.
Укажем, чтобы на элементе <li> значение неявного счётчика list — item увеличивалось на 2:
На самом деле это очень удобно, когда уже есть готовый неявный счётчик. Если вам нужно создать многоуровневый нумерованный список, это можно сделать в два счёта:
Выведем нумерацию при помощи функции counters ( ) :
Всё! Больше ничего делать не нужно.
Особенность списка <ol>
Скопировать ссылку на секцию «Особенность списка ol» Скопировано
Любые вносимые в HTML изменения нумерации списка также будут учитываться счётчиком.
Например, если вы укажете в списке <ol> атрибут start и значение с которого следует начинать нумерацию, или атрибут reversed , чтобы пронумеровать список в обратном порядке, то данные атрибуты будут учитываться при нумерации списка. Также это касается элемента <li> и его атрибута value :
Выведем нумерацию при помощи функции counters ( ) :
Полная поддержка подобного поведения, пока что, реализована только в Mozilla Firefox.
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Алексей Степанов советует
Скопировать ссылку на секцию «Алексей Степанов советует» Скопировано
�� Вы вдохновились выступлением Никиты Дубко и решили написать курсовую оформленную через CSS? Счётчики помогут вам сделать автоматическую нумерацию страниц, рисунков, вашего содержания и списка литературы, а также глав и подглав вашего научного труда.
Или у вас есть интересное дизайнерское решение вроде изображённого в начале статьи?
Также вы можете посмотреть две переведённые статьи на тему счётчиков:
Читайте также
Принцип каскада
Один из основных принципов работы CSS. Стили читаются и применяются сверху вниз.
How to Use an HTML Counter Like a Pro
Creating good web content involves a dedicated eye for the material that is being displayed for the end-user. Knowing how to break that content down into equal parts of readability and comforting design brings you closer to great content. Having access and knowledge of the tools to help you achieve that lands you in the area of amazing content.
Something simple like a counting system may seem like a rather mundane topic to cover when CSS has access to so many “flashier” options. However, in this tutorial, you will learn how to not only use an HTML CSS counter but also how to make it really stand out in your design.
What Exactly Is an HTML Counter?
An HTML counter does much what its namesake states. It provides a method to track incremental changes or uses of content within HTML code. This gives a visual point of reference for the end-user to see the intended flow or hierarchy in the content provided. You could of course use an ordered list for something like that, but you will quickly find inherent limits to what you can do when compared to using CSS to create an HTML counter.
There are some basic concepts of the HTML counter to know before you start trying it out for yourself. They are as follows:
- Counter-Reset: This adds a counter or resets a working counter.
- Counter-Increment: This increases the value of a counter.
- Content: Adds in the specified content.
In the next sections, these will be covered with examples to help break down their intended uses and syntax.
Counter-reset
The “counter-reset” property is what you will use to provide a zero or starting point for your counter. In the example below, you have a bit of HTML code setup to start with.
Take note of the singular button element that is within the body of the document. As it stands, this will create an HTML page with just a single small button on it. On the sample CSS code below the “counter-reset” is added within the body of the HTML document.
The counter-reset property requires a name, (or target), to understand what it is supposed to work with. The name of the HTML counter can be anything you want. In the example below, it has been set to what is called “ buttonNumber .”
This sets up the base of the numbering system so the page knows we are starting with a reset or zero value. The next goal is to add three more buttons and also have them automatically increment with a system we create. Soon we will have a proper HTML counter set up.
Counter-increment
This is where you can direct the counters to increase with each element added. In the HTML code, you will notice that three buttons are now present. Also, note there is no content added for these buttons.
As is, the HTML content will not change much, aside from having three empty buttons on the page. The next process is to start the incrementing code. Moving to the CSS stylesheet, the following code now includes a counter-increment section for the button element.
Notice that the value for the counter-increment is set to the “buttonNumber” name used for the counter name before. Another important area to check out is the use of the word “ after ” placed next to the button selector. The words “before” and “after” can be added to advise the stylesheet on how to insert the applied property values. In this particular example, the use of “after” will place the details after the button property content. Speaking of content, this button element needs some of that next.
HTML Counter Content
This next section of our HTML counter is where you will fill out exactly what you want the counter to show in increment additions. For the example, the numbers are going to identify their numerical increase as they are added.
To make this visually represented on the HTML page, the “ content ” property will be added to the button selector. In the CSS example below, the content is set to display the text string “I am button number” followed by a space. Take note of the blank space added after the word number.
Directly after the quotation close of that string, you will see the counter property added with the value of “ buttonNumber ” added in between parentheses directly after it.
This section tells the browser that when a button is added into the body, it should contain the text string of “I am button number” followed by the counter value of “ buttonNumber .” With this code in place, the following HTML output is displayed.
HTML Counters: Fun in Designs
Just like that, you have walked through the creation of an HTML counter and take note that the code of the actual counter itself was nothing more than six lines. You can take this further by adding some styling to the button as well.
Take the following CSS code below.
By adding this separate set of CSS code into the stylesheet, the HTML counter can transform into something much less “vanilla” on the page. Take a look at the resulting output below.
This counter concept can be changed and used for other interesting ideas, as well. Take the example code for the CSS below. You will see that it is set up to number quotes of the character Dwight from the sitcom “The Office.”
Three paragraph tags are added to the HTML code as well.
With the HTML counter set in place, you receive the following HTML output:
The great thing about the HTML counter once it is in place, is that all added content that falls under its rules will automatically get an incrementing number assigned to it. This works on its own even if you are adding or removing content. Consider how great this is when working with chapters or index entries.
There’s So Much More to Learn
CSS as a toolbox is a welcoming set. New users can jump into some pretty amazing design options right away with very little in the way of training. If you have your interest peaked for more topics to devour, then check out options like background gradients, borders, or color choice.
Take your time and have fun with the various options available in CSS. If you ever feel like you are overwhelmed, then take a deep breath and relax. You are not expected to know everything right away, or ever at all.
Something that can help with the learning process is to imagine a simple site for something that you actually care about. Work on a small piece at a time until you feel comfortable with whatever aspect of CSS you are mastering. Remember, Udacity is here to help you out along the way.
Why stop at just web development? The power of programming is empowering people to do even more with their designs. If you are looking to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.