Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Работа с датой и временем в javascript

Всем привет. Сегодня мы познакомимся с основными функциями и методами для работы с датой и временем в javascript. Итак, поехали!

Напишем небольшую функцию которая будет выводит текущую дату и время.

<div id="time"></div>
<script>

    function time(){
        var date = new Date();
        var Year = date.getFullYear(),
            month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth()+1) : (date.getMonth()+1),
            day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
            hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
            minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
            seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(),
            miliseconds = date.getMilliseconds() < 10 ? '0' + date.getMilliseconds() : date.getMilliseconds();
        var time = day + '-'+month+'-'+Year+'  '+hours+':'+minutes+':'+seconds+'  '+miliseconds;
        document.querySelector('#time').innerHTML =time ;


    }

    setInterval(function(){
        time();
    },1);


</script>

Здесь мы создали функцию time() которая выводит текущее время в элемент с идентификатором time. В самой функции мы первым делом создаем объект date. Данный объект содержит информацию о текущем времени. Для того чтобы ее получить необходимо использовать следующие методы:

getFullYear() - возвращает текущий год

getMonth() - возвращает число текущего месяца, примечание(нумерация начинается с нуля, поэтому для корректного результата необходимо прибавить единицу)

getDate() - возвращает текущую дату

hours() - возвращает текущий час

getMinutes() - возвращает текущую минуту

getSeconds() - возвращает текущую секунду

getMilliseconds() - возвращает текущую миллисекунду

Еще есть:

getDay() - возвращает текущий номер дня недели (нумерация начинается с нуля)

С помощью данных методов мы получаем основные параметры текущего времени.

Заметьте что функцию time мы вызываем каждую миллисекунду для обновления значений времени.

Сразу хочу сказать что текущее время берется из настроек вашей операционной системы.

Поэтому если что то не так проверьте его.

Помимо простого вывода текущего времени мы можем создать таймер.

Делается это примерно так:

<div id="time"></div>
<div id="newHours"></div>
<script>
    function time(){
        var date = new Date();
        var Year = date.getFullYear(),
            month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth()+1) : (date.getMonth()+1),
            day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
            hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
            minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
            seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(),
            miliseconds = date.getMilliseconds() < 10 ? '0' + date.getMilliseconds() : date.getMilliseconds();
        var time = day + '-'+month+'-'+Year+'  '+hours+':'+minutes+':'+seconds+'  '+miliseconds;
        document.querySelector('#time').innerHTML =time ;

        var MilisecondsNew = Date.UTC(Year,month,day,hours,minutes,seconds,miliseconds),
            MilisecondsForward = Date.UTC(Year,month,day,parseInt(hours)+1,0,0,0);
        var newDay = MilisecondsForward -  MilisecondsNew;
        if(newDay > 0){
            var date2 = new Date(newDay);
            document.querySelector('#newHours').innerHTML ='До конца этого часа осталось '+date2.getMinutes()+' Мин. '+date2.getSeconds()+' сек.' ;

        }

    }
    setInterval(function(){
        time();
    },1);

</script>

Я немного расширил код. А именно добавил таймер который показывает сколько минут и секунд осталось до конца текущего часа.

Метод UTC() класса Date() возвращает количество миллисекунд прошедших с эпохи unix(1 января 1970).

Сам метод может принимать семь основных параметров даты и времени. В исходном коде я получаю количество миллисекунд прошедших с эпохи unix до текущего времени в переменную MilisecondsNew. А в переменную MilisecondsForward я помешаю те же самые параметры, только к значению часов добавляю единицу тем самым увеличивая текущее время на час. Затем из времени увеличенным на час вычитаю текущее время(MilisecondsForward - MilisecondsNew) все это дело помещается в переменную newDay которая не должна быть отрицательной. Под конец я создаю новый объект даты date2() и передаю в него количество миллисекунд(newDay) и далее используя стандартные методы вывожу количество минут и секунд оставшееся для завершения этого часа.

Может быть немного запутано, но если немного поразбираться, то все встанет на свои места.

На этом данная статья подошла к концу. Не забывайте оставлять комментарии и подписываться в группу

вк.

Я с вами прощаюсь. Желаю успехов и удачи! Пока.

Оцените статью

Еще статьи

Локальное хранилище в HTML5

Методы идентификации подстрок в ES6

Методы для работы с регулярными выражениями в javaScript

Атрибут autocomplete html

video и audio в Javascript

Псевдоселектор out-of-range в css

Broadcast Channel API в html5

read-write css

Как установить go

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

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