Question

所以我的任务是从XML文件创建一个jQuery幻灯片，其中包含一个基于日期更改图像的计时机制。我在幻灯片中使用了XML，但我正在努力添加日期功能。我希望能够根据onDate和offDate“打开”和“关闭”图像。我理解Javascript不是基于日期显示事物的最佳方式，但是当前站点结构中存在阻止服务器端计时的限制。所以我希望能够加载10个图像，然后根据今天的日期显示三个，以及onDate / offDate是什么。

这是我在想的逻辑......如果今天是＆lt; onDate .hide或者今天是否> offDate .hide else .show

我在哪里挣扎

在XML文件中输入日期的正确方法。
将XML中的日期解析为Javascript，jQuery可以使用它将今天的日期与XML中的日期进行比较并相应地显示图像。
确定日期后，根据日期确定显示或隐藏特定图像的方法。

非常感谢任何帮助。

XML

<eq-banner>
    <id>1</id>
    <url>linktopage.html</url>
    <img>image.jpg</img>
    <dept>equipment</dept>
    <onDate>12/01/2010</onDate>
    <offDate>12/31/2010</offDate>
    <copy>FREE Stuff</copy>
</eq-banner>

的jQuery

<script>
$(document).ready(function () {
$.ajax({
    type: "GET",
    url: "rotationData.xml",
    dataType: "xml",
    success: xmlParser
});
});

function xmlParser(equipment) {

$(equipment).find('eq-banner').each(function() {                    

        var id = $(this).attr('id');
        var dept = $(this).find('dept').text();
        var url = $(this).find('url').text();
        var img = $(this).find('img').text();

        $('<div class="'+dept+'"</div>').html('<a href="'+url+'"><img src="images/'+img+'" /></a><br />').appendTo('#apparel')
            $("#equipment").cycle({
                fx:"fade", 
                speed:100,
                timeout:5000
                    });;

            });

}

</script>

HTML

<div id="equipment">
</div>

Answer 1

如果您信任XML源的数据质量，特别是日期在样本中都是格式良好的，那么很容易将其转换为JavaScript“Date”对象：

var str = "12/31/2010";

var pieces = str.split('/');
var date = new Date(~~str[2], ~~str[0] - 1, ~~str[1]);

（~~技巧将字符串转换为数字;按照您的喜好进行操作。）此外，月数从零开始编号，因此减法。

比较日期在JavaScript中运行得非常好，或者您可以在日期上调用“.getTime（）”方法，以显式获取“自纪元以来的毫秒”值来进行比较。

至于你如何显示/隐藏图像，我倾向于有条件地将一个类添加到要隐藏的元素（或显示;无论哪个最有意义）。

Answer 2

XML没有处理日期的“正确”方式，JavaScript可以解析任何事情。然而，最适合JS的格式将类似于“2011年10月20日”，时间可选地以“12:34:56”格式添加。像这样的字符串可以直接提供给新的Date（）构造函数，无论位置如何都可以正确解析。

datestr = "October 20, 2011";
date = new Date(datestr);

要比较Date对象，只需使用＆lt;或者＆gt; - 但是，JS Date对象包含一个也将被比较的时间元素。因此，如果您使用var now = new Date();为当前内容创建新的Date对象并将其与var dat = new Date("string with today's date");进行比较，则会发现dat小于now，因为dat有时间00:00:00而now有当前时间。如果这是一个问题，您必须同时明确地比较Date.getDate()，Date.getMonth()和Date.getFullYear()。（http://www.w3schools.com/jsref/jsref_obj_date.asp）

来自XML的带有日期参数的jQuery幻灯片

2 个答案: