显示基于日期的div（jQuery-JS）

对于JS忍者，这可能是基本的JS编程，但我不确定如何攻击它，因为我是Javascript/jQuery noob。显示基于日期的div（jQuery-JS）

我想根据今天的日期显示一个div。

逻辑是这样的：

查看今日日期，如果今天的日期是从span.job-日起30天或更长时间再展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，但仍然吮吸它。你知道有什么好的资源可以开始使用基础知识吗？到目前为止，我发现的大部分内容真的很快。再次感谢你的帮助！ – 2013-03-03 18:39:05

我不知道哪一个来源最适合你。 JavaScript具有很多表现力，学习所有错综复杂的事情需要很多。像其他任何事情一样，不幸的是，你只需要花时间。当您通过Google搜索解决个人问题时，您会看到奇怪而有趣的前瞻性解决方案，它会教您什么是可能的。我上面的例子是为了简单地解决问题，但如果你看看这里的其他答案，你会发现最终他们是更好的解决方案。例如。用'getDaysOld（date）'抽象日期数字为 – tjb1982 2013-03-06 18:04:13

（cont。）显然是重用此功能的好方法，但我认为，对于初学者来说，使用的特定表达式@elclanrs有点不透明。 '|'字符是[按位或]（http://stackoverflow.com/questions/6194950/what-does-the-single-pipe-do-in-javascript），他在科学记数法中使用了一天milleseconds，但它的工作原理和它的优雅。 @Valera也是正确的，你不应该从这样的演示中获取数据，而是作为一个属性或隐藏的输入等，因为你希望能够稍后改变格式。 – tjb1982 2013-03-06 18:11:58

这应该有所帮助。您可以使用此功能来确定差异天过去的日期和今天之间：

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/

虽然，你的工作-Date类，我建议你存储在毫秒为单位的日期作为参数，像这样：

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

这样你就不必担心f ormat你的日期显示在。

来源

2013-03-03 05:27:46 Valera

这是一个很好的观点，我会看看如果我能让杰基尔输出这个。我认为它可以。谢谢！ – 2013-03-03 18:39:56

显示基于日期的div（jQuery-JS）

回答

相关问题