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

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

webfanat вконтакте webfanat youtube

javascript время

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) и далее используя стандартные методы вывожу количество минут и секунд оставшееся для завершения этого часа.

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

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

вк.

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

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

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm