Создание секундомера с помощью CSS3 - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

Выбери свою IT специальность

Подписка

Создание секундомера с помощью CSS3

advertisement advertisement

Введение

В этой статье Вы научитесь создавать секундомер, используя HTML5 и CSS3. Мы рассмотрим CSS3 анимацию с тремя кнопками: старт, остановка и сброс. Запуск начинает работу секундомера, стоп – останавливает секундомер, и кнопка сброса сбрасывает секундомер.


Основная логика создания секундомера очень простая, Вы будете использовать простой контейнер div, содержащий цифры, они будут увеличиваться с помощью ключевого кадра анимации.

Сначала создайте div (содержащий числа) с помощью кода HTML:

<!doctype html>

<html>

<head>

    <title>Stopwatchtitle>

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

head>

<body>

    <div class="number">0 1 2 3 4 5 6 7 8 9div>

body>

html>

Вот результат предыдущего кода:

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

Теперь Вам нужно выровнять числа по вертикали за счет уменьшения ширины контейнера. Итак, создайте файл CSS (styles.css) и введите следующий код в этот CSS-файл.

* {

    margin: 0;

    padding: 0;

}

.numbers {

    width: 10px;

}

Согласно предыдущему коду, Ваши цифры будут выровнены вертикально: 

Виравнение цифр по вертикале

Теперь используем цифровые шрифты, Вы можете скачать их с сайта ds-digi.font. Используйте следующий код CSS, чтобы изменить шрифт:

.number {

    width: 10px;

    font-family: digital, arial, verdana;

    font-size: 50px;

}

@font-face {

    font-family: 'digital';

    src: url('DS-DIGI.TTF');

}

Результат такого кода:

Результат 

Давайте поместим числа в поле для отображения только одной цифры. Таким образом, в HTML-файле поместите div с цифрами в другой div. Код будет таким:

    <div class="box">

        <div class="number">0 1 2 3 4 5 6 7 8 9div>

    div>

Теперь примените такие настройки CSS, чтобы отображать только одну цифру. 

.box {

    width: 40px;

    height: 40px;

    border: 1px solid #000;

    font-size: 50px;

    overflow: hidden;

}

.number {

    width: 40px;

    line-height: 40px;

    font-family: digital, arial, verdana;

    text-align: center;

}

Таким будет результат:

Результат

Давайте создадим анимацию цифр, так как это главная задача статьи. Логика анимации – изменить значение top position absolute от 0 до -400 px, потому что высота поля 40 px, а у нас есть цифры от 0 до 9, то есть в общей сложности 10 цифр, так что 40 * 10 = 400, Вы будете менять верхнюю от 0 до -400 px. Вот так выглядит код файла style.css:

.box {

    width: 40px;

    height: 40px;

    border: 1px solid #000;

    font-size: 50px;

    overflow: hidden;

    position: relative;

}

.number {

    width: 40px;

    line-height: 40px;

    font-family: digital, arial, verdana;

    text-align: center;

    position: absolute;

    top: 0;

    left: 0;

    -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */

    animation: moveup 1s steps(10, end) infinite;

}

@-webkit-keyframes moveup {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

@keyframes moveup {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

Вот каким будет результат:

Новый результат

Вы можете увидеть, что цифры заменяются, а не перемещаются вверх пиксель за пикселем. Теперь создайте еще несколько div: два для часов, два для минут, два для секунд и три для мили-секунд.

<!doctype html>

<html>

<head>

    <title>Stopwatchtitle>

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

head>

<body>

    <div class="stopwatch">

        <div class="box">

           

            <div class="number tensPlaceHours">0 1 2 3 4 5 6 7 8 9div>

        div>

        <div class="box">

            <div class="number onesPlaceHours">0 1 2 3 4 5 6 7 8 9div>

        div>

       

        <div class="box divider">

            <div class="number">:div>

        div>

        

        <div class="box">

            <div class="number tensPlaceMinutes">0 1 2 3 4 5 6div>

        div>

        <div class="box">

            <div class="number onesPlaceMinutes">0 1 2 3 4 5 6 7 8 9div>

        div>

       

        <div class="box divider">

            <div class="number">:div>

        div>

       

        <div class="box">

            <div class="number tensPlaceSeconds">0 1 2 3 4 5 6div>

        div>

        <div class="box">

            <div class="number onesPlaceSeconds">0 1 2 3 4 5 6 7 8 9div>

        div>

       

        <div class="box divider">

            <div class="number">:div>

        div>

       

        <div class="box">

            <div class="number onesPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>

        div>

        <div class="box">

            <div class="number tensPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>

        div>

        <div class="box">

            <div class="number hundredsPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>

        div>

    div>

body>

html>

Результат предыдущего кода:

Результат кода

Теперь установите float left для всех div, как указано ниже.

.box {

    width: 40px;

    height: 40px;

    border: 1px solid #000;

    font-size: 50px;

    overflow: hidden;

    position: relative;

}

После применения float left мы получим такой результат:

Результат с применением float

Таким образом, максимальное значение минут и секунд будет 60. Вы должны создать две анимации, одна из которых будет 10-шаговой и 10-цифровой, и одна 6-шаговой, и только 6-цифровой. Используйте следующий код CSS для этого:

* {

    margin: 0;

    padding: 0;

}

.box {

    width: 40px;

    height: 40px;

    border: 1px solid #000;

    font-size: 50px;

    overflow: hidden;

    position: relative;

    float: left;

}

.number {

    width: 40px;

    line-height: 40px;

    font-family: digital, arial, verdana;

    text-align: center;

    position: absolute;

    top: 0;

    left: 0;

    -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */

    animation: moveup 1s steps(10, end) infinite;

}

.moveuptens {

    -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */

    animation: moveuptens 1s steps(10, end) infinite;

}

.moveupsix {

    -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */

    animation: moveupsix 1s steps(6, end) infinite;

}

@-webkit-keyframes moveup {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

@keyframes moveup {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

@-webkit-keyframes moveuptens {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

@keyframes moveuptens {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

@-webkit-keyframes moveupsix {

    0% {

        top: 0px;

    }

    100% {

        top: -240px;

    }

}

@keyframes moveupsix {

    0% {

        top: 0px;

    }

    100% {

        top: -240px;

    }

}

@font-face {

    font-family: 'digital';

    src: url('DS-DIGI.TTF');

}

Теперь, после создания предыдущих анимаций, примените класс CSS к HTML следующим образом:

<div class="stopwatch">

        <div class="box">

            <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>

        div>

        <div class="box">

            <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>

        div>

        <div class="box divider">

            <div class="number">:div>

        div>

        <div class="box">

            <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>

        div>

        <div class="box">

            <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>

        div>

        <div class="box divider">

            <div class="number">:div>

        div>

        <div class="box">

            <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>

        div>

        <div class="box">

            <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

        div>

        <div class="box divider">

            <div class="number">:div>

        div>

        <div class="box">

            <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

        div>

        <div class="box">

            <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

        div>

        <div class="box">

            <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

        div>

    div>

Таким будет результат: 

Новый результат

Теперь Вам нужно синхронизировать скорость анимации со скоростью времени. Примените следующие свойства:

.onesPlaceSeconds {

    animation-duration: 10s;

    -webkit-animation-duration: 10s;

}

.tensPlaceSeconds {

    animation-duration: 60s;

    -webkit-animation-duration: 60s;

}

.hundredsPlaceMiliSeconds {

    animation-duration: 1s;

    -webkit-animation-duration: 1s;

}

/*1/10th of .second*/

.tensPlaceMiliSeconds {

    animation-duration: 0.1s;

    -webkit-animation-duration: 0.1s;

}

.hundredsPlaceMiliSeconds {

    animation-duration: 0.01s;

    -webkit-animation-duration: 0.01s;

}

.onesPlaceMinutes {

    animation-duration: 600s;

    -webkit-animation-duration: 600s;

}

/*60 times .second*/

.tensPlaceMinutes {

    animation-duration: 3600s;

    -webkit-animation-duration: 3600s;

}

/*60 times .minute*/

.onesPlaceHours {

    animation-duration: 36000s;

    -webkit-animation-duration: 36000s;

}

/*60 times .minute*/

.tensPlaceHours {

    animation-duration: 360000s;

    -webkit-animation-duration: 360000s;

}

/*10 times .hour*/

Вот таким будет результат:

Результат

Вы можете увидеть, что сейчас с секундомером все в порядке. Теперь добавьте стили к секундомеру. Модифицируйте HTML и CSS.

HTML-файл:

<!doctype html>

<html>

<head>

    <title>Stopwatchtitle>

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

head>

<body>

    <!doctype html>

    <html>

    <head>

        <title>Stopwatchtitle>

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

    head>

    <body>

        <div class="MainContainer">

            <div class="stopwatch">

                <div class="box">

                    <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>

                div>

                <div class="box">

                    <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>

                div>

                <div class="box divider">

                    <div class="number">:div>

                div>

                <div class="box">

                    <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>

                div>

                <div class="box">

                    <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>

                div>

                <div class="box divider">

                    <div class="number">:div>

                div>

                <div class="box">

                    <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>

                div>

                <div class="box">

                    <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

                div>

                <div class="box divider">

                    <div class="number">:div>

                div>

                <div class="box">

                    <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

                div>

                <div class="box">

                    <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

                div>

                <div class="box">

                    <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

                div>

            div>

        div>

    body>

html>

CSS-файл:

* {

    margin0;

    padding0;

}

body {

    backgroundurl(images.jpg);

}

.MainContainer {

    padding200px;

    text-aligncenter;

}

.stopwatch {

    padding10px;

    backgroundlinear-gradient(top, #222, #444);

    overflowhidden;

    displayinline-block;

    border7px solid #eeeeee;

    border-radius20px;

    box;

}

.box {

    width40px;

    height40px;

    font-size50px;

    overflowhidden;

    positionrelative;

    floatleft;

}

.number {

    width40px;

    line-height40px;

    font-familydigitalarialverdana;

    text-aligncenter;

    color#fff;

    positionabsolute;

    top0;

    left0;

    -webkit-animationmoveup 1s steps(10, end) infinite/* Chrome, Safari, Opera */

    animationmoveup 1s steps(10, end) infinite;

}

.moveuptens {

    -webkit-animationmoveuptens 1s steps(10, end) infinite/* Chrome, Safari, Opera */

    animationmoveuptens 1s steps(10, end) infinite;

}

.moveupsix {

    -webkit-animationmoveupsix 1s steps(6, end) infinite/* Chrome, Safari, Opera */

    animationmoveupsix 1s steps(6, end) infinite;

}

.onesPlaceSeconds {

    animation-duration10s;

    -webkit-animation-duration10s;

}

.tensPlaceSeconds {

    animation-duration60s;

    -webkit-animation-duration60s;

}

.onesPlaceMiliSeconds {

    animation-duration1s;

    -webkit-animation-duration1s;

}

/*1/10th of .second*/

.tensPlaceMiliSeconds {

    animation-duration0.1s;

    -webkit-animation-duration0.1s;

}

.hundredsPlaceMiliSeconds {

    animation-duration0.01s;

    -webkit-animation-duration0.01s;

}

.onesPlaceMinutes {

    animation-duration600s;

    -webkit-animation-duration600s;

}

/*60 times .second*/

.tensPlaceMinutes {

    animation-duration3600s;

    -webkit-animation-duration3600s;

}

/*60 times .minute*/

.onesPlaceHours {

    animation-duration36000s;

    -webkit-animation-duration36000s;

}

/*60 times .minute*/

.tensPlaceHours {

    animation-duration360000s;

    -webkit-animation-duration360000s;

}

/*10 times .hour*/

@-webkit-keyframes moveup {

    0% {

        top0px;

    }

    100% {

        top-400px;

    }

}

@keyframes moveup {

    0% {

        top0px;

    }

    100% {

        top-400px;

    }

}

@-webkit-keyframes moveuptens {

    0% {

        top0px;

    }

    100% {

        top-400px;

    }

}

@keyframes moveuptens {

    0% {

        top0px;

    }

    100% {

        top-400px;

    }

}

@-webkit-keyframes moveupsix {

    0% {

        top0px;

    }

    100% {

        top-240px;

    }

}

@keyframes moveupsix {

    0% {

        top0px;

    }

    100% {

        top-240px;

    }

}

@font-face {

    font-family'digital';

    srcurl('DS-DIGI.TTF');

}

После применения некоторых стилей результат будет следующим:

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

Теперь добавьте 3 кнопки типа radio для запуска, остановки и сброса секундомера. Эти кнопки будут управлять секундомером.

HTML-код:

<!doctype html>

<html>

<head>

    <title>Stopwatchtitle>

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

head>

<body>

    <div class="MainContainer">

        <input id="start" name="controls" type="radio" />

        <input id="stop" name="controls" type="radio" />

        <input id="reset" name="controls" type="radio" />

        <div class="stopwatch">

            <div class="box">

                <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>

            div>

            <div class="box">

                <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>

            div>

            <div class="box divider">

                <div class="number">:div>

            div>

            <div class="box">

                <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>

            div>

            <div class="box">

                <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>

            div>

            <div class="box divider">

                <div class="number">:div>

            div>

            <div class="box">

                <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>

            div>

            <div class="box">

                <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

            div>

            <div class="box divider">

                <div class="number">:div>

            div>

            <div class="box">

                <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

            div>

            <div class="box">

                <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

            div>

            <div class="box">

                <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>

            div>

        div>

       

        <div id="stopwatch_controls">

            <label for="start">Startlabel>

            <label for="stop">Stoplabel>

            <label for="reset">Resetlabel>

        div>

    div>

body>

html>

Теперь измените код CSS для стилизации элементов управления секундомером:

* {

    margin: 0;

    padding: 0;

}

body {

    background: url(images.jpg);

}

.MainContainer {

    padding: 200px;

    text-align: center;

}

.stopwatch {

    padding: 10px;

    background: linear-gradient(top, #222, #444);

    overflow: hidden;

    display: inline-block;

    border: 7px solid #eeeeee;

    border-radius: 20px;

    box;

}

.box {

    width: 40px;

    height: 40px;

    font-size: 50px;

    overflow: hidden;

    position: relative;

    float: left;

}

.number {

    width: 40px;

    line-height: 40px;

    font-family: digital, arial, verdana;

    text-align: center;

    color: #fff;

    position: absolute;

    top: 0;

    left: 0;

    -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */

    animation: moveup 1s steps(10, end) infinite;

}

#stopwatch_controls label {

    cursor: pointer;

    padding: 5px 10px;

    background: #eeeeee;

    font-family: arial, verdana, tahoma;

    font-size: 20px;

    border-radius: 0 0 3px 3px;

}

input[name="controls"] {

    display: none;

}

#stop:checked ~ .stopwatch .number {

    animation-play-state: paused;

    -webkit-animation-play-state: paused;

}

#start:checked ~ .stopwatch .number {

    animation-play-state: running;

    -webkit-animation-play-state: running;

}

#reset:checked ~ .stopwatch .number {

    animation: none;

    -webkit-animation: none;

}

.moveuptens {

    -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */

    animation: moveuptens 1s steps(10, end) infinite;

    /*By default animation will be paused*/

    animation-play-state: paused;

    -webkit-animation-play-state: paused;

}

.moveupsix {

    -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */

    animation: moveupsix 1s steps(6, end) infinite;

    /*By default animation will be paused*/

    animation-play-state: paused;

    -webkit-animation-play-state: paused;

}

.onesPlaceSeconds {

    animation-duration: 10s;

    -webkit-animation-duration: 10s;

}

.tensPlaceSeconds {

    animation-duration: 60s;

    -webkit-animation-duration: 60s;

}

.onesPlaceMiliSeconds {

    animation-duration: 1s;

    -webkit-animation-duration: 1s;

}

/*1/10th of .second*/

.tensPlaceMiliSeconds {

    animation-duration: 0.1s;

    -webkit-animation-duration: 0.1s;

}

.hundredsPlaceMiliSeconds {

    animation-duration: 0.01s;

    -webkit-animation-duration: 0.01s;

}

.onesPlaceMinutes {

    animation-duration: 600s;

    -webkit-animation-duration: 600s;

}

/*60 times .second*/

.tensPlaceMinutes {

    animation-duration: 3600s;

    -webkit-animation-duration: 3600s;

}

/*60 times .minute*/

.onesPlaceHours {

    animation-duration: 36000s;

    -webkit-animation-duration: 36000s;

}

/*60 times .minute*/

.tensPlaceHours {

    animation-duration: 360000s;

    -webkit-animation-duration: 360000s;

}

/*10 times .hour*/

@-webkit-keyframes moveup {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

@keyframes moveup {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

@-webkit-keyframes moveuptens {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

@keyframes moveuptens {

    0% {

        top: 0px;

    }

    100% {

        top: -400px;

    }

}

@-webkit-keyframes moveupsix {

    0% {

        top: 0px;

    }

    100% {

        top: -240px;

    }

}

@keyframes moveupsix {

    0% {

        top: 0px;

    }

    100% {

        top: -240px;

    }

}

@font-face {

    font-family: 'digital';

    src: url('DS-DIGI.TTF');

}

Финальный результат

Финальный результат

Источник: http://www.c-sharpcorner.com/UploadFile/75a48f/stopwatch-using-css3/

КОММЕНТАРИИ И ОБСУЖДЕНИЯ
advertisement advertisement

Покупай подпискус доступом ко всем курсам и сервисам

Библиотека современных IT знаний в удобном формате

Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 10 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
59.99 $
Оформить подписку
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 16 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
89.99 $
Оформить подписку
Премиум
  • Все видеокурсы на 1 год
  • Тестирование по 24 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
169.99 $
Оформить подписку
Notification success