Exore LTD » CSS3 » CSS3 цифровые часы с помощью jQuery
Лого SiteHere.ru

Октябрь 25, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

CSS3 цифровые часы с помощью jQuery

CSS3 цифровы часы с помощью jQuery

В этой статье мы создадим красивые цифровые часы, используя jQuery и немного CSS3, которые можно использовать у себя на сайте, а также для обратного отсчета, например, до нового года :). Уже скоро можно будет ставить данные часики.

Пример часов можно увидеть здесь:

Посмотреть примерСкачать



HTML часть

HTML разметка очень простая. Часы, минуты и секунды мы будем вставлять и элементы неупорядоченного списка:

1
2
3
4
5
6
7
8
9
10

<div class="clock">
    <div id="Date"></div>
    <ul>
        <li id="hours"> </li>
        <li id="point">:</li>
        <li id="min"> </li>
        <li id="point">:</li>
        <li id="sec"> </li>
    </ul>
</div>


CSS часть

Стиль также простой, вы можете сами в дальнейшем совершенствовать и улучшать его:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
.container {
    width: 960px; 
    margin: 0 auto; 
    overflow: hidden;
}
 
.clock {
    width:800px; 
    margin:0 auto; 
    padding:30px; 
    border:1px solid #333; 
    color:#fff; 
}
 
#Date { 
    font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; 
    font-size:36px; 
    text-align:center; 
    text-shadow:0 0 5px #00c6ff; 
}
 
ul { 
    width:800px; 
    margin:0 auto; 
    padding:0px; 
    list-style:none; 
    text-align:center; 
}
 
ul li { 
    display:inline; 
    font-size:10em; 
    text-align:center; 
    font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; 
    text-shadow:0 0 5px #00c6ff; 
}
 
#point { 
    position:relative; 
    -moz-animation:mymove 1s ease infinite; 
    -webkit-animation:mymove 1s ease infinite; 
    padding-left:10px; 
    padding-right:10px; 
}
 
@-webkit-keyframes mymove 
{
    0% {
        opacity:1.0; 
        text-shadow:0 0 20px #00c6ff;
    }
 
    50% {
        opacity:0; 
        text-shadow:none; 
    }
 
    100% {
        opacity:1.0; 
        text-shadow:0 0 20px #00c6ff; 
    }	
}
 
 
@-moz-keyframes mymove 
{
    0% {
        opacity:1.0; 
        text-shadow:0 0 20px #00c6ff;
    }
 
    50% {
        opacity:0; 
        text-shadow:none; 
    }
 
    100% {
        opacity:1.0; 
        text-shadow:0 0 20px #00c6ff; 
    }	
}


jQuery часть

Сначала нам необходимо подключить библиотеку jQuery:

1

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

Сейчас создаем сам скрипт:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    $(document).ready(function() {
        // Создаем две переменные с названиями месяцев и названиями дней.
        var monthNames = [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" ]; 
        var dayNames= ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"]
 
        // Создаем объект newDate()
        var newDate = new Date();
        // "Достаем" текущую дату из объекта Date
        newDate.setDate(newDate.getDate());
        // Получаем день недели, день, месяц и год
        $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
 
        setInterval( function() {
            // Создаем объект newDate() и показывает секунды
            var seconds = new Date().getSeconds();
            // Добавляем ноль в начало цифры, которые до 10
            $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
        },1000);
 
        setInterval( function() {
            // Создаем объект newDate() и показывает минуты
            var minutes = new Date().getMinutes();
            // Добавляем ноль в начало цифры, которые до 10
            $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
        },1000);
 
        setInterval( function() {
            // Создаем объект newDate() и показывает часы
            var hours = new Date().getHours();
            // Добавляем ноль в начало цифры, которые до 10
            $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
        }, 1000);				
    });

Рассмотрим подробнее данный код:

  1. new Date() — объект, который нужен для того, чтобы узнать текущее время на компьютере;
  2. setDate() и getDate() — задает и получает день месяца (от 1 до 31) соответственно с дату на компьютере;
  3. getSeconds(), getMinutes() и getHours() — эти методы получают секунды, минуты и часы соответственно времени на компьютере;
  4. ( seconds < 10 ? "0" : "" ) + seconds) — я не хочу вдаваться в программирование, лишь скажу что это краткая запись условия. Она означает что цифрам до 10 необходимо в начало добавить ноль, т.к. js получает цифры без нуля впереди, но для приятного внешнего вида, лучше добавлять ноль в начало.
  5. функция setInterval — является javascript функцией, но не частью jQuery.


Вывод

Мы создали простые цифровые часы на jQuery, а также немного используя CSS3. Смело можете применять их у себя на сайте.


Успехов!

Источник: www.alessioatzeni.com

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

3 комментария к записи
  • ZeroXor

    Обожаю такое неоновое свечение! А что, очень даже имеет смысл сделать такую «уведомляшку», например, на время окончания какого-нибудь конкурса, мол, успей принять участие. А уж на лендингах и вовсе цены им не будет.

     
    Ответить
  • Lily

    А как сделать обратный отсчет? я с JS пока не дружу) ❓

     
    Ответить
  • Никита

    Зачем 3 setInterval?
    Ведь каждый срабатывает раз в секунду. Ваш код можно упростить и тем самым оптимизировать вот так:

    $(document).ready(function() {

    var monthNames = [ «Январь», «Февраль», «Март», «Апрель», «Май», «Июнь», «Июль», «Август», «Сентябрь», «Октябрь», «Ноябрь», «Декабрь» ];

    var dayNames= [«Воскресенье»,»Понедельник»,»Вторник»,»Среда»,»Четверг»,»Пятница»,»Суббота»]

    // Создаем объект newDate()
    var newDate = new Date();

    // «Достаем» текущую дату из объекта Date
    newDate.setDate(newDate.getDate());

    // Получаем день недели, день, месяц и год
    $(‘#Date’).html(dayNames[newDate.getDay()] + » » + newDate.getDate() + ‘ ‘ + monthNames[newDate.getMonth()] + ‘ ‘ + newDate.getFullYear());

    setInterval( function() {
    // Создаем объект newDate() и показывает секунды
    var seconds = new Date().getSeconds();
    var minutes = new Date().getMinutes();
    var hours = new Date().getHours();
    $(«#watchMinutes»).html(( minutes < 10 ? "0" : "" ) + minutes);
    $("#watchSec").html(( seconds < 10 ? "0" : "" ) + seconds);
    $("#watchHours").html(( hours < 10 ? "0" : "" ) + hours);
    },1000);
    });

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *