Question

我有一张表格，用于根据时间表预订多个活动。已定义每个事件的开始时间。

示例：

活动名称：足球
时间：17：00

需要什么： 如果事件相对于当前时间还剩30分钟，则用户无法预订此事件。如何使用JavaScript实现这一目标？

Answer 1

setInterval是要走的路，除非你的服务器上有一个消息框架推送实时更新。

LIVE DEMO

注意：以下代码是演示中的代码段。

window.setInterval(function () {
    $(events).each(function (index, event) {
        var currentTime = new Date().getTime();
        var expirationTime = event.time.addMinutes(-30).getTime();
        event.expired = expirationTime - currentTime <= 0;
    });
    createEvents(events); // Destroy and recreate view.
}, updateFrequency);

演示代码：

// ----------------------------------------------------------
// Utility and prototype functions.
// ----------------------------------------------------------

// Date prototype methods.
Date.prototype.formatTime = function () {
    var hours = this.getHours();
    var minutes = this.getMinutes();
    var period = hours > 11 ? 'PM' : 'AM';

    if (hours > 12) {
        hours -= 12;
    }
    if (hours < 10) {
        hours = '0' + hours;
    }
    if (minutes < 10) {
        minutes = '0' + minutes;
    }

    return hours + ':' + minutes + ' ' + period;
};

Date.prototype.addMinutes = function (min) {
    var clone = new Date(this.getTime());
    return new Date(clone.getTime() + min * 60000);
};

// Utilities functions to generate times for current day.
var getHourMinSecMsOfDay = function(hour, min, sec, ms) {
    var now = new Date();
    now.setHours(hour, min, sec, ms);
    return now;
};

var getStartOfDay = function() {
    return getHourMinSecMsOfDay(0, 0, 0, 0);
};

var getHourOfDay = function(hour) {
    return getHourMinSecMsOfDay(hour, 0, 0, 0);
};

var getHourMinOfDay = function(hour, min) {
    return getHourMinSecMsOfDay(hour, min, 0, 0);
};

// ----------------------------------------------------------
// Aplication variable and function declarations.
// ----------------------------------------------------------

// Data
var events = [{
    'name': 'Hockey',
    'time': getHourMinOfDay(9, 30),
    'expired': false
}, {
    'name': 'Baseball',
    'time': getHourMinOfDay(11, 59),
    'expired': false
}, {
    'name': 'Football',
    'time': getHourOfDay(17),
    'expired': false
}, {
    'name': 'Basketball',
    'time': getHourMinOfDay(20, 25),
    'expired': false
}];

var updateFrequency = 3000; // Every 3 seconds

// Displays an event.
var displayEvent = function(event) {
    var date = event.time.formatTime();
    var wrapper = $('<div>').addClass('event');
    $('<p>').text(event.name).appendTo(wrapper);
    $('<p>').text(date).appendTo(wrapper);
    var expired = $('<p>').appendTo(wrapper);
    if (event.expired) {
        expired.addClass('expired');
        expired.removeClass('active');
        expired.text('Closed');
    } else {
        expired.addClass('active');
        expired.removeClass('expired');
        expired.text('Available');
    }
    return wrapper.clone();
}

// Remove and re-create the events.
var createEvents = function(events) {
    $('#events').empty();
    $(events).each(function (index, event) {
        $('#events').append(displayEvent(event));
    });
};

// Validate the status of all the events.
var validateStatus = function(events) {
    $(events).each(function (index, event) {
        event.expired = event.time.addMinutes(-30).getTime() - new Date().getTime() <= 0;
    });
    createEvents(events);
};

// ----------------------------------------------------------
// Begin execution of application.
// ----------------------------------------------------------

// Update event status every 3 seconds.
window.setInterval(function () {
    validateStatus(events);
}, updateFrequency);

// Validate and create events.
validateStatus(events);

Answer 2

试试这个：

var currentTime = new Date().getTime();

function bookingChecker( evtTime ) {
  if (evtTime - currentTime <= (30 * 60 * 1000)) { 
                           //converting 30min to milliseconds
    /*
    YOUR CODE TO DISABLE BOOKING
    */
  }
}

setInterval (function() {
  bookingChecker( event1Date.getTime() );
}, 1000);

预订检查员将每秒运行一次，检查是否必须停止预订活动。

JavaScript - 在活动指定时间前30分钟关闭活动预订

2 个答案: