Как создать секундомер с помощью HTML, CSS и простого JavaScript (часть 1)

Эта статья изначально размещена на Tinloof.

Эта серия статей состоит из двух частей:

В этой первой части мы создаем пользовательский интерфейс секундомера с помощью HTML и CSS.

Во второй части мы сделаем пользовательский интерфейс функциональным с помощью JavaScript (секундомер работает).

Конечный результат

Наша папка содержит файл HTML, файл CSS, файл JavaScript и папку (называемую «значки») с 3 значками SVG:

├── icons | 
├── pause-button.svg | 
├── play-button.svg | 
└── reset-button.svg 
├── index.html 
├── script.js 
└── style.css

Вот ссылка на иконку для загрузки иконок SVG.

Объявление HTML DOCTYPE

В файл index.html мы включаем объявление HTML DOCTYPE вверху страницы, чтобы сообщить браузеру, что визуализируемый документ является документом HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

💡 Совет: вы можете легко сгенерировать объявление DOCTYPE в VSCode, набрав «!» и нажмите ENTER в HTML-файле.

Свяжите HTML-файл с CSS-файлом

Затем мы связываем наш HTML-файл с нашим CSS-файлом, добавляя к нашему head следующее:

<link rel="stylesheet" href="style.css" />

💡 Совет: вы можете легко сгенерировать ссылку в VSCode, набрав link:css.

Мы получаем:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    
</body>
</html>

Свяжите HTML-файл с JS-файлом

Наконец, мы соединяем наш HTML-файл с нашим JS-файлом, добавляя следующий script перед закрывающим тегом body:

<script src="script.js"></script>

Мы получаем:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Отлично, теперь мы готовы кодировать секундомер.

Примечание. файл script.js будет пустым в этой статье, поскольку мы реализуем его функции только в следующей части этой серии.

Во-первых, мы изменяем содержимое, заключенное в теги title, чтобы имя вкладки браузера было более актуальным.

Мы пишем «Золотой секундомер» вместо «Документ»:

В body добавьте h1 с надписью «ЗОЛОТОЙ СЕКУНДОМЕР» и добавьте span с надписью «00: 00: 00».

Это код:

<body>    
    <h1>GOLD STOPWATCH</h1>
    <span>00:00:00</span>
    <script src="script.js"></script>
</body>

Мы получаем:

Затем мы добавляем кнопки, чтобы позже мы могли нажимать на них и иметь работающий секундомер. Наши кнопки имеют изображения SVG, хранящиеся в папке с иконками.

Добавьте button таким образом:

<body>
  <h1>GOLD STOPWATCH</h1>
  <span>00:00:00</span>
<button>
    <img src="icons/play-button.svg" />
<img src="icons/pause-button.svg" />
  </button>
<button>
    <img src="icons/reset-button.svg" />
  </button>
 <script src="script.js"></script>
</body>

Мы намеренно добавляем два значка в первую кнопку (значки «Воспроизведение» и «Пауза»), потому что мы настроим эту кнопку для обслуживания функций воспроизведения и паузы позже в части JavaScript.

Когда мы нажмем на значок воспроизведения, он исчезнет, а вместо него появится значок паузы. И наоборот, когда мы щелкаем значок «Пауза», он исчезает, а вместо него появляется значок «Воспроизвести».

Вот что мы получаем:

Вуаля! Мы закончили с большей частью HTML. Теперь мы собираемся стилизовать его с помощью CSS.

Добавить шрифты Google

Мы хотим использовать шрифт Montserrat для большей части текста на веб-странице. Для чисел в секундомере мы хотим использовать Roboto Mono.

Чтобы добавить эти шрифты, мы ищем их в Google Fonts и повторяем следующие шаги для каждого из них:

1- Нажмите + Выбрать этот стиль.

2- Справа появится окно, содержащее тег шрифта link. Мы копируем тег link и вставляем его в head HTML-документа.

Вот как это выглядит:

Вот результат:

<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gold Stopwatch</title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;900&display=swap"
    rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;1,300&display=swap"
    rel="stylesheet"/>

Установка первых цветов

Начнем с настройки цвета текста и фона нашей страницы. Текст нашей страницы будет белым, а цвет фона - темно-синим.

Мы нацелены на селектор body в style.css:

body { 
background-color : #31394c; 
color : #ffffff; 
}

Вот что мы получаем:

Стиль `h1`

Далее, мы хотим уделить больше внимания «ЗОЛОТОЙ СЕКУНДОМЕР». Давайте стилизуем это:

h1 {
    font-size: 48px;
    font-family: "Montserrat", sans-serif;
    font-weight: 200;
    
    text-align: center;
    line-height: 59px;
    
    padding: 0;
    margin: 0;
  }

Примечание. тег h1 имеет встроенные поля в браузерах. Мы переопределяем их, используя margin: 0.

Мы получаем:

Создайте единый мир в `h1`

Если мы вспомним, наш h1 не однороден, «ЗОЛОТО» отображается желтым цветом с эффектом свечения, а «СЕКУНДОМЕР» отображается белым.

Для этого мы оборачиваем span ЗОЛОТОМ и присваиваем ему class, который мы называем золотом:

<h1>
    <span class="gold">GOLD</span> STOPWATCH
  </h1>
<span>00:00:00</span>

Теперь давайте создадим новый class:

.gold {
    font-weight: 900;
    
    color: #f2c94c;
    text-shadow: 0 0 0px #fff, 0 0 50px #f2c94c;
  }

Мы получаем:

Мы используем text-shadow для создания эффекта свечения. Чтобы понять, как это работает, вот объяснение w3schools о том, как этого добиться.

Стиль расположения элементов

Если мы посмотрим на наш окончательный результат, мы можем представить приложение секундомера как столбец из трех блоков:

Если мы проверим окончательный результат, мы увидим три блока:

Блок h1
Временной span блок
Блок кнопок (который мы обернем div)

Блоки разделены промежутком в 23px и выровнены по центру страницы по горизонтали.

Чтобы центрировать элементы по горизонтали, столбец должен занимать всю ширину страницы.

Мы создаем этот столбец div и даем ему имя class секундомер и оборачиваем наши кнопки div:

<div class="stopwatch">
  <h1>
    <span class="gold">GOLD</span> STOPWATCH
  </h1>
  <span>
    00:00:00
  </span>
<div>
    <button>
      <img src="icons/play-button.svg" />
<img src="icons/pause-button.svg" />
    </button>
<button>
      <img src="icons/reset-button.svg" />
    </button>
  </div>
</div>

Давайте оформим его как столбец:

.stopwatch {
    display: grid;
    justify-items: center;
    grid-row-gap: 23px;
    width: 100%;
    padding-top: 25px;
  }

Наш секундомер class - это grid, который растягивает всю страницу (width на 100%) и разделяет его блоки на 23 пикселя с помощью grid-row-gap.

Мы также добавили 25px padding вверху, чтобы было немного места над заголовком.

Мы добавляем class к диапазону, содержащему '00: 00: 00 ', и называем его time:

<div class="stopwatch">
  <h1>
    <span class="gold">GOLD</span> STOPWATCH
  </h1>
<span class="time">00:00:00</span>
</div>

Теперь зададим стиль «00:00:00», чтобы увеличить его и использовать правильный шрифт:

.time {
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-size: 48px;
}

Вот результат:

Создайте круг с помощью CSS

Чтобы получить круг вокруг «00:00:00», мы оборачиваем его вокруг другого div, который мы называем кругом:

<div class="stopwatch">
  <h1>
    <span class="gold">GOLD</span> STOPWATCH
  </h1>
  <div class="circle">
    <span class="time">00:00:00</span>
  </div>
</div>

Чтобы div выглядел как круг, мы присваиваем ему border и добавляем 50% border-radius.

Мы получаем:

Чтобы он выглядел как круг, мы придаем ему точные пропорции. Мы установим для height и width значение 270 пикселей:

Чтобы центрировать время внутри него по горизонтали и вертикали, мы используем Flexbox.

Мы ставим display из flex кругу div.

Чтобы центрировать время по вертикали, мы используем align-items: center:

И чтобы центрировать время span по горизонтали, мы используем justify-content: center:

Вот код:

.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    
    height: 270px;
    width: 270px;
    
    border: 2px solid white;
    border-radius: 50%;
  }

Если вам нужно освежить в памяти, что такое flexbox и CSS grid, вам поможет этот замечательный канал на YouTube Layout Land от Jen Simmons.

Если вместо border-radius 50% мы сделаем это 0%, мы получим квадрат вместо круга:

Стиль `button`s

Теперь сосредоточимся на стилизации button s:

button {
    background: transparent;
    padding: 0;
    border: none;
    margin: 0;
    outline: none;
}

Мы получаем:

Теперь поместим их в центр, нацелив только что созданные div элементы управления.

Мы хотим, чтобы наш значок «Пауза» перекрывал значок «Воспроизведение» и создавал пространство между «Пауза / Воспроизведение button» и «Сброс» button. Мы оборачиваем наши кнопки вокруг div, которое мы вызываем controls:

<body>
  <div class="stopwatch">
    <h1>
      <span class="gold">GOLD</span> STOPWATCH
    </h1>
    <div class="circle">
      <span class="time" id="display">
        00:00:00
      </span>
    </div>
<div class="controls">
      <button class="buttonPlay">
        <img src="icons/play-button.svg" />
<img src="icons/pause-button.svg" />
      </button>
<button class="buttonReset">
        <img src="icons/reset-button.svg" />
      </button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

Этим новым div элементам управления будет присвоен display flex, присвоить ему фиксированный width и использовать justify-content: space-between для правильного распределения пространства:

.controls {
    display: flex;
    justify-content: space-between;
    
    width: 187px;
  }

Мы получаем:

Напомним, SVG для воспроизведения и кнопки находятся в одном button. На данный момент мы хотим только показать кнопку «Воспроизведение» и скрыть кнопку «Пауза».

Давайте дадим id этим SVG (и кнопке сброса тоже, так как мы будем использовать ее позже):

<body>
  <div class="stopwatch">
    <h1>
      <span class="gold">GOLD</span> STOPWATCH
    </h1>
    <div class="circle">
      <span class="time" id="display">
        00:00:00
      </span>
    </div>
<div class="controls">
      <button class="buttonPlay">
        <img id="playButton" src="icons/play-button.svg" />
<img id="pauseButton" src="icons/pause-button.svg" />
      </button>
<button class="buttonReset">
        <img id="resetButton" src="icons/reset-button.svg" />
      </button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

И используйте свойство display, чтобы отобразить значок воспроизведения и скрыть значок паузы:

#playButton {
  display: block;
}
#pauseButton {
  display: none;
}

Мы получаем:

Примечание. мы могли бы использовать classes для playButton и pauseButton, но мы используем id, потому что это будет полезно во второй части этой серии.

Стиль `cursor`

Сделаем так, чтобы у наших кнопок была стрелка / указатель cursor:

button {
  cursor: pointer;
  background: transparent;
  padding: 0;
  border: none;
  margin: 0;
  outline: none;
}

Вот результат:

В качестве последнего штриха давайте добавим значок, чтобы наша страница имела соответствующий значок вкладки в браузере:

Мы можем сделать это, добавив в HTML head тег ссылки, который указывает на наш значок SVG:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⏳</text></svg>">

Теперь head выглядит так:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gold Stopwatch</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;900&display=swap"
      rel="stylesheet"/>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;1,300&display=swap"
      rel="stylesheet"/>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⏳</text></svg>">
  </head>

Наш секундомер тоже очень отзывчивый. Это потому, что мы использовали макеты CSS, такие как grid и flexbox, чтобы стилизовать расположение наших элементов.

Давай проверим.

Если мы находимся в Chrome, мы открываем консоль (⌘ + SHIFT + C для Mac или Ctrl + SHIFT + J в Windows) и выбираем iPhone 5 SE (это маленький размер дисплея):

Отлично, работает.

В следующей части этой серии мы сосредоточимся на функциональности секундомера с JavaScript.

Первоначально опубликовано на странице https://tinloof.com/blog/how-to-build-a-stopwatch-with-html-css-js-react-part-1/

Как создать секундомер с помощью HTML, CSS и простого JavaScript (часть 1)

Конечный результат

Объявление HTML DOCTYPE

Свяжите HTML-файл с CSS-файлом

Свяжите HTML-файл с JS-файлом

Добавить шрифты Google

Установка первых цветов

Стиль h1

Создайте единый мир в h1

Стиль расположения элементов

Создайте круг с помощью CSS

Стиль buttons

Стиль cursor

Вопросы по теме

Стиль `h1`

Создайте единый мир в `h1`

Стиль `button`s

Стиль `cursor`