Показать div на основе даты (jQuery - JS)

Для JS ninjas это может быть базовое JS-программирование, но я не уверен, как атаковать его, так как я Javascript/jQuery noob.Показать div на основе даты (jQuery - JS)

Я хотел бы показать div, основанный на сегодняшней дате.

Logic-то вроде этого:

Дата Проверить сегодняшнюю, и если дата сегодняшних 30 дней или больше от span.job-даты, то показать div.message. Кроме того, я хотел бы вставить число дней в сообщение в div. (В этом примере будет показано сообщение).

<span class="job-date">1-14-2013</span> 

<div class="message">This job is XX days old it may no longer be available</div>

Спасибо!

источник

2013-03-03 Mark Mitchell

JS:

$(function() { 
    var jobDateText = $(".job-date").html() 
    , jobDate = new Date(jobDateText) 
    , today = new Date() 
    , thirtyDaysInMS = 30 * 24 * 60 * 60 * 1000 
    , differenceInMS = Math.abs(today - jobDate) 
    , differenceInDays = Math.floor(differenceInMS/1000/60/60/24); 

    if (differenceInMS > thirtyDaysInMS) $(".message").show(); 
    $("span.daysOld").html(differenceInDays); 
});

HTML:

<span class="job-date">1-20-2013</span> 

    <div class="message">This job is <span class="daysOld"></span> days old, and it may no longer be available</div>

CSS:

.message { 
    display:none; 
}

AngularJS это действительно хорошая альтернатива для JQuery вещи, как это. Все, что вам нужно сделать в AngularJS устанавливается переменная в области контроллера называется что-то вроде $scope.stale = true и $scope.daysOld на основе даты математике, а затем в вашем HTML просто

<div class="message" ng-show="stale">This job is {{daysOld}} days old it may no longer be available</div>

источник

2013-03-03 05:22:51 tjb1982

tjb1982 Спасибо! Работал как шарм и благодарность за заметку об AngularJS. Я слышал об этом, но еще не посмотрел на него. Я просто собираюсь с Javascript, но все еще сосать его. Знаете ли вы о каких-либо хороших ресурсах, чтобы начать работу с основами? Большая часть материала, который я нашел до сих пор, действительно очень глубока. В очередной раз благодарим за помощь! –

Я не знаю ни одного источника, который лучше всего подходит для вас. JavaScript обладает множеством выразительных возможностей и требует многого, чтобы изучить все его тонкости. Как и все остальное, вам просто нужно поставить время, к сожалению. Когда вы решаете индивидуальные проблемы с помощью googling, вы увидите странные и интересные решения, которые научат вас тому, что возможно. Мой пример, приведенный выше, имел целью просто проложить проблему, но если вы посмотрите на другие ответы здесь, вы обнаружите, что в конечном итоге они являются лучшими решениями.Например. абстрагирование даты math с помощью 'getDaysOld (date)' равно – tjb1982

(продолжение) отличный способ повторного использования этой функциональности, очевидно, но конкретное выражение @elclanrs мало чем непрозрачно для новичков, я бы подумал. Символ '|' является [побитовым OR] (http://stackoverflow.com/questions/6194950/what-does-the-single-pipe-do-in-javascript), и он использует научную нотацию в течение одного дня в миллисекунды, но он работает, и он изящный. @Valera также прав, что вы не должны получать данные из презентации, как это, а скорее как атрибут или скрытый ввод и т. Д., Потому что вы хотите иметь возможность изменить формат позже. – tjb1982

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

function getDaysOld(date) { 
    // Get difference in days from ms and floor result 
    return 0|(new Date() - date) * 1.16e-8; 
}

Вы можете использовать его так:

if (getDaysOld(new Date('1-14-2013')) >= 30) { 
    ... 
}

Вы можете извлечь текст из span с JQuery и используйте эту функцию, чтобы показать/скрыть div при необходимости.

источник

2013-03-03 05:22:41 elclanrs

Предполагая, что вы используете JQuery, вот jsFiddle для вас: http://jsfiddle.net/Pb3bm/

Хотя, в классе работу на дату, я хотел бы предложить вам хранить дату в миллисекундах в качестве параметра, например так:

<span class="job-date" datems="1358139600000">1-14-2013</span>

таким образом, вам не придется беспокоиться о f ormat ваша дата отображается в.

источник

2013-03-03 05:27:46 Valera

Это хороший момент, я увижу, могу ли я заставить Джекила вывести это. Я думаю, что это возможно. Благодаря! –

Показать div на основе даты (jQuery - JS)

ответ

Смежные вопросы