Приведем еще раз код функции setClassOfTime:

 

<script type="text/javascript"> 
 window.onload = setClassOfTime; 
  function setClassOfTime(){ 
     var season        = new Date(); 
     var currentMonth  = season.getMonth(); 
     var currentDate   = season.getDate(); 
     var currentDayOfWeek = season.getDay(); 
     switch(currentDayOfWeek){ 
         case 0: 
                 currentDayOfWeek = ' monday'; 
             break; 
         case 1: 
                 currentDayOfWeek = ' tuesday'; 
             break; 
         case 2: 
                 currentDayOfWeek = ' wednesday'; 
             break; 
         case 3: 
                 currentDayOfWeek = ' thursday'; 
             break; 
         case 4: 
                 currentDayOfWeek = ' friday'; 
             break; 
         case 5: 
                 currentDayOfWeek = ' saturday'; 
             break; 
         case 6: 
                 currentDayOfWeek = ' sunday'; 
             break; 
     }; 
   
     var currentTime   = season.getHours(); 
     var currentMinutes = season.getMinutes(); 
     ++currentMinutes; 
     var currentHour   = currentTime; 
     currentTime       = (currentTime > 6 && currentTime < 12) ? ' morning' : ((currentTime >= 12 && currentTime < 18) ? ' day' : ((currentTime >= 18 && currentTime < 22) ? ' evening' : (((currentTime >= 22)||(currentTime >= 0 && currentTime < 6)) ? ' night' : ''))); 
   
   
     var currentYear   = season.getFullYear(); 
     var sesonMenu     = ''; 
         switch(currentMonth){ 
            case 11: 
             switch(currentDate){ 
                case 25: 
                         seasonMenu += ' сhristmas'; 
                     break; 
             }; 
             sesonMenu += ' winter december'; 
             break; 
            case 0: 
             switch(currentDate){ 
                case 1: 
                         sesonMenu += ' new-year'; 
                     break; 
                case 7: 
                         seasonMenu += ' сhristmas'; 
                     break; 
             }; 
             sesonMenu += ' winter january'; 
             break; 
            case 1: 
             switch(currentDate){ 
                case 14: 
                         sesonMenu += ' valentines-day'; 
                     break; 
                case 23: 
                         sesonMenu += ' mens-day'; 
                     break; 
             }; 
             sesonMenu += ' winter february'; 
             break; 
           case 2: 
             switch(currentDate){ 
                case 8: 
                         sesonMenu += ' womens-day'; 
                     break; 
             }; 
             sesonMenu += ' spring march'; 
             break; 
           case 3: 
             sesonMenu += ' spring april'; 
             break; 
           case 4: 
             switch(currentDate){ 
                 case 1: 
                         sesonMenu += ' labor-day'; 
                     break; 
                 case 9: 
                         sesonMenu += ' great-victory-day'; 
                     break; 
             }; 
             sesonMenu += ' spring may'; 
             break; 
           case 5: 
             switch(currentDate){ 
                 case 1: 
                         sesonMenu += ' international-childrens-day'; 
                     break; 
             }; 
             sesonMenu += ' summer june'; 
             break; 
           case 6: 
             sesonMenu += ' summer jule'; 
             break; 
           case 7: 
             sesonMenu += ' summer august'; 
             break; 
           case 8: 
             sesonMenu += ' autumn september'; 
           break; 
           case 9: 
             sesonMenu += ' autumn october'; 
             break; 
           case 10: 
             sesonMenu += ' autumn november'; 
             break; 
         }; 
   
         sesonMenu += ' day'+currentDate; 
         sesonMenu += ' year'+currentYear; 
         sesonMenu += currentDayOfWeek; 
         sesonMenu += currentTime; 
         sesonMenu += ' hour'+currentHour; 
         sesonMenu += ' minutes'+currentMinutes; 
   
         document.body.className += sesonMenu; 
 }; 
 </script> 

World-Limo это фирма занимающаяся прокатом лимузинов, заказом самолета или сделает для вас прогулку на вертолете , и много другого интересного отдыха.

Какие функции для работы со временем в javascript используются в setClassOfTime?

Функции для работы со временем в javascript.

   Примечание автора: все методы объекта Date, а также его параметры Вы можете посмотреть например по этой ссылке.

   Для начала мы просто инициализируем текущий объект даты:

var season        = new Date();

После чего получаем:

  • season.getMonth(); - текущий месяц (0 – 12) (для оформления создаются классы .january, .february, .march, .april, .may, .june, .jule, .august, .september, .october, .november, .december) соответственно;
  • season.getDate(); - текущий день месяца (1-31) .day1-.day31;
  • season.getDay(); - текущий день недели (0-6) (который мы в последствии преобразовываем в более знакомые и понятные дни недели на английском языке: .monday, .tuesday, .wednesday, .thursday, .friday, .saturday., .sunday );
  • season.getHours(); - получаем текущий час (с 0 по 23) (дальше по текущему часу мы вычисляем время дня: утро( .morning), день( .day), вечер( .evening) или ночь( .night), и добавляем нужный класс на английком языке) .hour0- .hour23;
  • season.getMinutes() – получаем текущую минуту (с 1 по 59) и создаем необходимый css класс .minutes1- .minutes59;
  • season.getFullYear() – получаем текущий год в полном формате из 4 чисел и создаем необходимый css класс .year[номер года из 4 цифр], например: .year2013;

   После чего нам необходимо рассчитать на основании номера текущего месяца, какая пора года сейчас на дворе?

   Для этого мы просто используем:

 var currentMonth  = season.getMonth(); 
 switch(currentMonth){ 
            case 11: 

   Где перечисляем все 12 месяцев, начиная с декабря по ноябрь (11 – декабрь (.december), 0 – январь (.january), 1 – февраль (.february), 2 – март(.march) , 3 – апрель(.april), 4 – май(.may), 5 – июнь(.june), 6 – июль(.jule), 7 – август(.august), 8 – сентябрь(.september), 9 – октябрь(.october), 10 – ноябрь(.november)). Мы добавляем английское название месяца к текущему списку классов, а также на основании номера месяца определяем пору года (весна (.spring), лето(. summer), осень(.autumn), зима(. winter)).

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

 var currentDate   = season.getDate(); 
 var currentMonth  = season.getMonth(); 
 switch(currentMonth){ 
            case 11: 
             switch(currentDate){ 
                case 25: 
                         seasonMenu += ' сhristmas'; //рождество по западному стилю 
                     break; 
             }; 
             sesonMenu += ' winter december'; 
             break; 
            case 0: 
             switch(currentDate){ 
                case 1: 
                         sesonMenu += ' new-year'; //новый год 
                     break; 
                case 7: 
                         seasonMenu += ' сhristmas'; //рождество по нашему стилю 
                     break; 
             }; 
             sesonMenu += ' winter january'; 
             break; 

Итак, перебирая в текущем месяце даты, мы можем задать любой дополнительный праздник, используя конструкцию: switch( currentDate){ case "день месяца": sesonMenu += ' класс-праздника'; break;}, добавляя case для каждого дня праздника, на который мы бы хотели сменить дизайн сайта.

   Давайте, для примера, добавим к списку праздников еще и helloween (.helloween), и кроме этого объявим дни с первого января по седьмое – выходными (.hollidays).

 switch(currentMonth){ 
            case 11: 
             switch(currentDate){ 
                case 25: 
                         seasonMenu += ' сhristmas'; 
                     break; 
             }; 
             sesonMenu += ' winter december'; 
             break; 
            case 0: 
             switch(currentDate){ 
                case 1: 
                         sesonMenu += ' new-year hollidays'; 
      //добавляем праздники с первого января по седьмое 
                     break; 
               case 2: 
                 case 3: 
                 case 4: 
                 case 5: 
                 case 6: 
                      sesonMenu += ' hollidays'; 
      //добавляем праздники с первого января по седьмое 
                     break; 
 case 7: 
                         seasonMenu += ' сhristmas hollidays'; 
       //добавляем праздники с первого января по седьмое 
                     break; 
             }; 
             sesonMenu += ' winter january'; 
             break; 
           case 9: 
 switch(currentDate){ 
                case 31: 
                 seasonMenu += ' helloween'; 
       //добавляем праздники с первого января по седьмое 
                                break; 
 }; 
   
             sesonMenu += ' autumn october'; 
             break; 
   
         }; 

   Я привел только измененные части кода функции setClassOfTime. Как видите, добавить свое событие, которое нужно оформить другим классом, в функцию очень просто. Единственное, возникают вопросы по добавлению особенного класса выделения к нескольким дням, как показано на примере добавления . hollidays класса к дням с первого января по седьмое, кроме того, что придется перебрать все даты одну за одной в case, к которым придется применить определенный класс, нужно еще и быть внимательным, добавляя класс к уже существующим событиям (в нашем примере это новый год: case 1: sesonMenu += ' new-year hollidays'; break; и рождество: case 7: seasonMenu += ' сhristmas hollidays'; break; };

   Смотрите в первой части статьи, какие классы были определены мною для праздников в разделе Какие классы оформления предлагает данная функция setClassOfTime?

   Первая часть статьи об изменении дизайна согласно времени года и суток находится здесь.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

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


Яндекс.Метрика