Javascript从包含日期的文件名创建图像库

Javascript create image gallery from filenames containing dates

本文关键字：创建图像文件名包含日期 Javascript 更新时间：2023-09-26

伙计们，我对此感到疯狂，我知道使用javascript有很多限制，但我正在构建的网站只有html文件。我也可以使用php，但它需要是一个单独的文件，可以引用，但不包括在内。最后的扩展名需要是.html

也就是说，我正在制作一个当天的照片脚本，以拍摄一个图像目录，其中图像名称包含日期。例如，今天的图像是20120822.jpg，并且有一个庞大的图像目录，直到年底。明天的图像将是20120823.jpg，昨天是20120821.jpg

好吧，那部分有点简单。。但现在我想创建一个由以前显示的所有图像组成的图库。。因此，导致当前日期的文件名的每个图像。因此，我需要读取目录，或者只生成最后20个图像，这些图像指向当前图像的日期文件名。我会满足于之前的20张图片或其他什么。

这是我用于当天照片的代码。。你知道我该怎么做吗？

    <script>

     //returns the current date in YYYYMMDDf_01.jpg format
     function getCurrentDateString(){
       //make a new date object set at the current date
       var currentDate = new Date();
       //get the four position year and
       //make it a string
       var currentYear = currentDate.getFullYear() + "";
       //get the zero-indexed month and add 1
       //for the real month and make it a strintg
       var currentMonth = (currentDate.getMonth() + 1) + "";
       //add a zero at the beginning if only one
       //digit month
       if (currentMonth.length == 1) {
         currentMonth = "0" + currentMonth;
       }
       //get the current day of the month and
       //make it a string
       var currentDayOfMonth = currentDate.getDate() + "";
       //add a zero if necessary
       if (currentDayOfMonth.length == 1) {
         currentDayOfMonth = "0" + currentDayOfMonth;
       }
       return(currentYear + currentMonth + currentDayOfMonth);
     }
     //preload image based upon currentDate
     var currentDateString = getCurrentDateString();
     var dailyImageObject = new Image();
      var dailyImageObjectURL = new Image();
     dailyImageObject.src = "http://perillotours.com/galleries/photo-of-the-day/images/" +         currentDateString + ".jpg";
     dailyImageObjectURL.href = "http://perillotours.com/galleries/photo-of-the-day/images/" + currentDateString + ".jpg";
     //called when the page loads to
     //set the actual HTML IMG element to have the same
     //SRC as our cached Image object
     function showDailyImage(){
       document.getElementById("dailyIMGElement").src = dailyImageObject.src;
     }
      function showDailyImageURL(){
       document.getElementById("dailyIMGElementURL").href = dailyImageObjectURL.href;
     }
     </script>

这是我放在html页面中显示当天照片的代码。

    <a rel="prettyphoto" id="dailyIMGElementURL">
    <img width="523" style="background-color: #000000;" id="dailyIMGElement" height="335" border="0" /></a>

所以基本上，我想用最后20个图像循环上面的代码20次。总之，我真的想不出该怎么做。

提前这么多询问任何帮助或想法！

Ian

您的代码没有引用任何jQuery，因此假设您希望使用jQuery:

从一个循环开始-这样你就可以很容易地定义你想要的图像数量。通过使用date对象，您不必担心减去多少天。（工作示例：http://jsfiddle.net/qH8xX/2/)
```
var html = "";
for( i = 0; i < 20; i++ ) {
    html += "<li>" + i + "</li>";
}
$("#gallery").html( html );
```

在循环中，从日期中减去1，然后将其保存为日期。（工作示例：http://jsfiddle.net/qH8xX/3/)

var html = "";
var date = new Date(); // store the current date
for( i = 0; i < 20; i++ ) {
    // subtract 1 from date
    // more here: http://stackoverflow.com/questions/1187824/finding-date-by-subtracting-x-number-of-days-from-a-particular-date-in-javascrip
    date = new Date( date.setDate( date.getDate() - 1 ) );
    html += "<li>" + i + " = " + date.toDateString() + "</li>";
}
$("#gallery").html( html );

3.轮到你了：现在使用date对象创建一个具有正确文件名的图像标记。使用它将有助于：http://www.w3schools.com/jsref/jsref_obj_date.asp