Часы работы дисплея


Я работаю на время работы дисплей, который перечислить часов:

  • Понедельник - Пятница / 8 - 4
  • Суббота / 8 - 2
  • Воскресенье / Закрытые

У меня есть скрипт добавить класс для выделения строки в зависимости от того, в какой день недели он есть, но интересно еще один способ, чтобы завершить задачу. Мне бы хотелось, чтобы я смог определить понедельник-пятница как один, а не весь список их в классы.

var now = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var checkTime = function() {
  var today = weekday[now.getDay()];
  var timeDiv = document.getElementById('timeDiv');
  var dayOfWeek = now.getDay();
  var hour = now.getHours();
  var minutes = now.getMinutes();

  //add AM or PM
  var suffix = hour >= 12 ? "PM" : "AM";

  // add 0 to one digit minutes
  if (minutes < 10) {
    minutes = "0" + minutes
  };

  if ((dayOfWeek == 6) && hour >= 8 && hour <= 14) {
    hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
    timeDiv.innerHTML = '' + today + ' ' + hour + ':' + minutes + suffix + ' - we\'re open!';
    timeDiv.className = 'open';
  } 

  else if ((dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4  || dayOfWeek == 5) && hour >= 8 && hour <= 16) {
    hour = ((hour + 11) % 12 + 1);
    timeDiv.innerHTML = 'Hi!! ' + today + ' ' + hour + ':' + minutes + suffix + ' - we\'re open!';
    timeDiv.className = 'open';
  }

  else {
    if (hour == 0 || hour > 12) {
      hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
    }
    timeDiv.innerHTML = ' Sorry—we\'re closed!';
    timeDiv.className = 'closed';
  }
};

    var currentDay = weekday[now.getDay()];
    var currentDayCLASS = "." + currentDay; //gets todays weekday and turns it into     class
    $(currentDayCLASS).toggleClass("today"); //hightlights today in the view hours

    setInterval(checkTime, 1000);
    checkTime();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="hours-block">
  <h2>Hours</h2>
  <div id="Monday" class="dateTime Monday Tuesday Wednesday Thursday Friday">
    <div class="day">Monday - Friday</div>
    <div class="time">8:00am - 4:00pm</div>
  </div>
  <br>
  <div id="Saturday" class="dateTime Saturday">
    <div class="day">Saturday</div>
    <div class="time">8:00am - 2:00pm</div>
  </div>
  <br>
  <div id="Sunday" class="dateTime Sunday">
    <div class="day">Sunday</div>
    <div class="time">Closed</div>
  </div>
</div>



87
0
задан 15 января 2018 в 05:01 Источник Поделиться
Комментарии
1 ответ

Вы можете попробовать что-то вроде этого:


  • Создать список из функции полезности, которую вы, возможно, захотите использовать. Вы можете экспортировать их в файл Utility. Это позволит сохранить код чистым и ремонтопригодны.


    • isWorkingDay: Понедельник - Пятница

    • isWorkingHours: старт в 8 утра и рабочий день заканчивается в 4 вечера. В субботу, заканчивается в 2 часа дня.

    • getDoubleDigitNumber: это будет полезно для обоих часов и минут.

    • getHoursIn12HrFormatчтобы получить часы в 12 часовом формате.

    • getDayText: чтобы получить название дня.


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

  • В checkTime функция, вы не хотите писать много логики. Использовать свои служебные функции и добавить какой-либо конкретной логике мутировать дом.

  • Поскольку вы имеете дело с классами, следует избегать className. Это позволит заменить все существующие классы. Вместо этого используйте .classList. Он предоставляет множество полезных утилит.

Ниже приведен пример:



function getDoubleDigit(value) {
return ("00" + value).slice(-2);
}

function getHourIn12HrFormat(hour) {
hour = hour || new Date().getHours();
// This can be written as:
// return hour % 12 || 12;
return ((hour + 11) % 12 + 1);
}

function isWorkingDay(day) {
return day !== 0 && day !== 6;
// This can also be weitten as
// return day > 0 && day < 6;
}

function isWorkingHours(hour) {
hour = hour || new Date().getHours();
return hour >= 8 && (isWorkingDay() && hour <= 16 || !isWorkingDay() && hour <= 14);
}

function getDayText(day) {
var weekday = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
day = day || new Date().getDay();
return weekday[day]
}

function getDateTimeString(date) {
var now = date || new Date();
var today = getDayText();
var minutes = now.getMinutes();
var hour = now.getHours();
//add AM or PM
var suffix = ["PM", "AM"][hour % 12];
return today + ' ' + getHourIn12HrFormat() + ':' + minutes + suffix

// If you are ok to use moment.js, all the above code can be converted to:
// return moment().format('dddd hh:mm A')
}

var checkTime = function() {
var now = new Date();
var timeDiv = document.getElementById('timeDiv');
var dayOfWeek = now.getDay();

// reset classes and only add necessary class.
timeDiv.classList.remove('open,close');
if (isWorkingHours() && dayOfWeek !== 0) {
timeDiv.innerHTML = ((isWorkingDay() ? 'Hi!! ' : '') + getDateTimeString() + ' - we\'re open!');
timeDiv.classList.add('open');
} else {
timeDiv.innerHTML = ' Sorry—we\'re closed!';
timeDiv.classList.add('closed');
}
};

var currentDay = getDayText();
var currentDayCLASS = "." + currentDay; //gets todays weekday and turns it into class
$(currentDayCLASS).toggleClass("today"); //hightlights today in the view hours

setInterval(checkTime, 1000);
checkTime();


#timeDiv {
padding: 4px;
border: 1px solid cyan;
background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hours-block">
<h2>Hours</h2>
<div id="Monday" class="dateTime Monday Tuesday Wednesday Thursday Friday">
<div class="day">Monday - Friday</div>
<div class="time">8:00am - 4:00pm</div>
</div>
<br>
<div id="Saturday" class="dateTime Saturday">
<div class="day">Saturday</div>
<div class="time">8:00am - 2:00pm</div>
</div>
<br>
<div id="Sunday" class="dateTime Sunday">
<div class="day">Sunday</div>
<div class="time">Closed</div>
</div>
</div>
<div id='timeDiv'></div>



Как предложил @Нитин Dhomse, вы можете использовать moment.js.

Это как ваш код форматирования будет выглядеть с момента:

return moment().format('dddd hh:mm A')

1
ответ дан 15 января 2018 в 06:01 Источник Поделиться