根據當天的日期和時間每天更改文本

Question

我對JavaScript很新穎，但正嘗試根據一天中的時間進行文本更改，並根據當天顯示不同的文本。

目前，我想搞清楚如何每天顯示不同的文本。例如從星期一到星期四，而不是說結束，它會說我們在下午6點開放，並在星期五&星期六，它會說我們是在上午11點開放。

有什麼想法？由於

HTML：

<div class="time"><a href="#contact"> 
    <img id="clock" src="assets/clock.png"> 
    <div id="open_close"></div></a> 
</div> 

的JavaScript：

var data = [ 
    {}, 
    {open:18, close:22}, 
    {open:18, close:22}, 
    {open:18, close:22}, 
    {open:12, close:22}, 
    {open:12, close:22}, 
    {open:12, close:22} 
]; 

var date = new Date(); 
var dayOfWeek = date.getDay(); // 0 is Sunday, 1 is Monday, etc... 
var openingTimes = data[dayOfWeek]; 
var openClosed = false; // closed by default 

// check that there are opening times for today 
if (openingTimes.hasOwnProperty('open') && openingTimes.hasOwnProperty('close')){ 
    var hour = date.getHours() 
    openClosed = openingTimes.open <= hour && hour < openingTimes.close; 
} 

$("#open_close").html(
    if (openClosed == True){ 
     console.log("we are open now") 
    } 

    if else (
     0 = 'we are open from mon to Mon to Mon-Sat': 
     1 = '6pm': 
     2 = '6pm': 
     3 = '6pm': 
     4 = '12pm': 
     5 = '12pm': 
     6 = '12pm' 
    ); 

Answer 1

嘗試this

var data = [ 
    {}, 
    {open:18, close:22}, 
    {open:18, close:22}, 
    {open:18, close:22}, 
    {open:12, close:22}, 
    {open:12, close:22}, 
    {open:12, close:22} 
]; 

var date = new Date(); 
var dayOfWeek = date.getDay(); // 0 is Sunday, 1 is Monday, etc... 
var openingTimes = data[dayOfWeek]; 
var openClosed = false; // closed by default 

// check that there are opening times for today 
if (openingTimes.hasOwnProperty('open') && openingTimes.hasOwnProperty('close')){ 
    var hour = date.getHours() 
    openClosed = openingTimes.open <= hour && hour < openingTimes.close; 
} 
var msg = function() { 
    if (openClosed == true){ 
     return "we are open now"; 
    } else { 
     switch(dayOfWeek) { 
      case 1: 
       return "open at 6pm"; 
       break; 
      case 2: 
       return "open at 6pm"; 
       break; 
      case 3: 
       return "open at 6pm"; 
       break; 
      case 4: 
       return "open at 12pm"; 
       break; 
      case 5: 
       return "open at 12pm"; 
       break; 
      case 6: 
       return "open at 12pm"; 
       break; 

      default: 
       return "close"; 
    } 
} 
$(document).ready(function() { 
    $("#open_close").html(msg()); 
}); 

Answer 2

$("#open_close").html(function(){ 
    if (openClosed == True) 
    { return "we are open now"; } 
    else 
    { 
    switch(dayOfWeek) { 
    case 1: 
    $("#open_close").html("open at 11am"); 
    break; 
    case 2: 
    $("#open_close").html("open at 1am"); 
    break; 
    default: 
    $("#open_close").html("close"); 
    } 

    } 
}); 

Answer 3

你可以工作了，當你的下一個開放從數據，而比硬編碼的字符串a如果你改變開放時間和/或日子，邏輯可能會中斷。

var data = [ 
    {}, //Sunday - closed 
    { open: 18, close: 22 }, //Monday 
    { open: 18, close: 22 }, //Tuesday 
    { open: 18, close: 22 }, //Wednesday 
    { open: 12, close: 22 }, //Thursday 
    { open: 12, close: 22 }, //Friday 
    { open: 12, close: 22 }, //Saturday 
]; 
var date = new Date(); 
var openingTimes = openingHours(date); 
var openClosed = false; // closed by default 
var hour = date.getHours() 
var message = 'We are open'; 

// check that there are opening times for today 
if (hasOpeningHours(openingTimes)){ 
    openClosed = openingTimes.open <= hour && hour < openingTimes.close; 
} 

if (!openClosed){ 
    //Work out when we next open... 
    if (hour < openingTimes.open){ // open later on today. 
     var openAt = new Date(); 
     message = 'We open at ' + formatHours(openingTimes.open) + ' today.'; 
    } 
    else { 
     var foundNextOpenDay = false; 
     var nextOpenDay; 
     for (var i = 1; !foundNextOpenDay && i < 7; i++){ 
      nextOpenDay = new Date(date.setDate(date.getDate() + 1)); // Add a day 
      openingTimes = openingHours(nextOpenDay); 
      if (hasOpeningHours(openingTimes)){ 
       foundNextOpenDay = true; // exit the for loop 
       message = 'We open ' + (i > 1 ? formatDay(nextOpenDay) : 'tomorrow') + 
          ' at ' + formatHours(openingTimes.open) + '.'; 
      } 
     } 
     if (!foundNextOpenDay){ 
      // No longer in business! 
      message = 'Sorry, we are closed for business.'; 
     } 
    } 
} 

function hasOpeningHours(openingTimes){ 
    return openingTimes.hasOwnProperty('open') && openingTimes.hasOwnProperty('close'); 
} 

function formatHours(hour){ 
    var amPm = hour > 11 ? 'pm' : 'am'; 
    var time; 
    if (hour === 0) { // If, for whatever reason, you open at midnight! 
     time = 12; 
    } 
    else { 
     time = hour > 12 ? hour - 12 : hour; 
    } 

    return time + amPm; 
} 

function formatDay(date){ 
    var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 
        'Thursday', 'Friday', 'Saturday']; 
    return dayNames[date.getDay()]; 
} 

function openingHours(date){ 
    var dayOfWeek = date.getDay(); // 0 is Sunday, 1 is Monday, etc... 
    var openingTimes = data[dayOfWeek]; 

    return openingTimes; 
} 

document.getElementById('open_close').innerHTML = message; 

與其他答案不同，您只需更改數據中的時間，其他所有內容都將正常工作。增加了獎金 - 它也沒有依賴jQuery。