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

当您下次打开数据时，您可以解决问题，而不是硬编码字符串和逻辑，如果您更改开放时间和/或天数，这些字符串和逻辑可能会中断。

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。

每天根据日期和时间更改文本

3 个答案: