Question

我正在寻找一种方法来改变我网站上的图片，如果时间晚于某一天晚上21点。基本上我不想手动操作，因为当我需要切换图像时我将无法访问计算机。我不能使用PHP作为我正在研究的网站不支持PHP（仅限ASP）。

我想这可以在Javascript中完成。

编辑：图片需要在21点更改一次，即使是第二天也不会再次更改。

Answer 1

已发布的答案应该有效。但是，要注意，你必须触发这样的功能，你可以在页面上执行onload事件，（如果你想在用户加载页面时只检查一次）;或者你可以设置一个每10分钟（或你想要的分钟）的计时器，触发这样的功能。这取决于您的网站的性质和用户在页面上花费的时间（如果它最多只有几分钟，那么它是值得的）

Answer 2

使用javascripit日期对象吗？

编辑Per @ Joe的建议

    //initialize date object

   function CheckAndChangeImage() {
    var d = new Date();
    var currentHour = d.getHours(); //note 0-23
    var currentDay = d.getDate();
    var currentMonth = d.getMonth();
    var currentYear = d.getYear();  // 2011 == 111

    if (currentHour >= 21 && currentDay >= 17 && currentMonth >= 5 && currentYear >= 111 ) 
     { 
         //do something on late night (21,22,23 hundread hrs)
         document.getElementById('thePicture').src = 'lateNight.png';
      }
  /* commented out, per OP edit 
  else
     { 
        //do something else
       document.getElementById('thePicture').src = 'OtherPicture.png';
      } */
  }

 setInterval(CheckAndChangeImage,60000); //60,000 milliseconds in a minute`

这将在用户计算机上检查它是否等于或大于21小时且日期在今天之后。 setInterval(function,ms)每分钟检查一次，所以如果用户在20:59来到您的网站，它应该仍然会在21:00更改。你提到图片需要改变一次，永远不会再改变。这个解决方案非常难看。我建议在本地机器上设置一个cron，以便在21:00运行并更新站点的时间。也许PHP可以做到这一点，但PHP不是我选择的语言。我可能会使用python和/或bash来完成这项任务。但你可能在Perl中完成它。我建议使用X / HTML解析器。

更多关于日期对象

getDate（）返回日期   月（从1-31）
      getDay（）返回星期几（从0到6）
      getFullYear（）返回年份（四位数）
      getHours（）返回小时（从0到23）
      getMilliseconds（）返回毫秒（从0-999）
      getMinutes（）返回分钟（从0到59）
      getMonth（）返回月份（从0到11）
      getSeconds（）返回秒数（从0到59）
      getTime（）返回自1月1日午夜以来的毫秒数，   1970年
      getTimezoneOffset（）返回GMT和local之间的时差   时间，以分钟为单位       getUTCDate（）根据通用时间返回月中的某天   （从1-31开始）
      getUTCDay（）根据通用时间返回星期几   （从0-6开始）
      getUTCFullYear（）根据通用时间返回年份   （四位数）
      getUTCHours（）根据通用时间（来自。）返回小时   0-23）
      getUTCMilliseconds（）根据。返回毫秒   世界时（从0-999）
      getUTCMinutes（）根据通用时间返回分钟   （从0到59）
      getUTCMonth（）根据通用时间（来自。）返回月份   0-11）
      getUTCSeconds（）根据通用时间返回秒   （从0到59）
      getYear（）已弃用。使用getFullYear（）方法代替
      parse（）解析日期字符串并返回毫秒数   自1970年1月1日午夜起       setDate（）设置月中的日期（从1-31开始）
      setFullYear（）设置年份（四位数）
      setHours（）设置小时（从0到23）
      setMilliseconds（）设置毫秒数（从0-999）
      setMinutes（）设置分钟（从0到59）
      setMonth（）设置月份（从0到11）
      setSeconds（）设置秒数（从0到59）
      setTime（）通过添加或减去指定的值来设置日期和时间   到/从的毫秒数   1970年1月1日午夜       setUTCDate（）根据通用时间设置月中的某一天   （从1-31开始）
      setUTCFullYear（）根据通用时间设置年份（四   数字）
      setUTCHours（）根据通用时间设置小时（来自   0-23）
      setUTCMilliseconds（）根据通用设置毫秒   时间（从0-999）
      setUTCMinutes（）根据通用时间设置分钟（来自   0-59）
      setUTCMonth（）根据通用时间设置月份（来自   0-11）
      setUTCSeconds（）根据通用时间设置秒数（来自   0-59）
      setYear（）已过时。使用setFullYear（）方法代替
      toDateString（）将Date对象的日期部分转换为   可读的字符串
      toGMTString（）已过时。使用toUTCString（）方法代替
      toLocaleDateString（）以Date为单位返回Date对象的日期部分   字符串，使用语言环境约定
      toLocaleTimeString（）以Date为单位返回Date对象的时间部分   字符串，使用语言环境约定
      toLocaleString（）使用locale将Date对象转换为字符串   公约
      toString（）将Date对象转换为字符串
      toTimeString（）将Date对象的时间部分转换为   串
      toUTCString（）根据。将Date对象转换为字符串   世界时间
      UTC（）返回日期字符串中的毫秒数   据1970年1月1日午夜报道   通用时间
      valueOf（）返回Date objecti

的原始值

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date提供日期对象的概述

w3schools也是如此 http://www.w3schools.com/jsref/jsref_obj_date.asp

Answer 3

您可以创建一个Date对象并获取当天的当前小时（根据客户端），并根据该小时更改图像的来源：

var d = new Date();
var hour = d.getHours();
if(hour > 21) {
   document.getElementById("imageID").src = "newImage.png";
}

更新（根据评论）

如果您希望图像在特定日期的21:00更改，并在该日期之后保留为新图像（并且您真的想使用JavaScript），那么您可以创建{{1} }对象与您指定的日期/时间（例如Date），然后您可以将当前日期与页面加载时的指定日期进行比较：

var d = new Date('June 18, 2011 21:00:00');

您可以看到此here的示例。（注释第一行，并在第二行注释，以查看未来和过去日期的差异）。

Answer 4

你应该在后端执行此操作，这是客户端的额外开销，但没有真正的原因，但是让我们试试JS吧！

var myDate = new Date();

var curr_hour = myDate.getHours();

var day = myDate.getDate();
var month = myDate.getMonth()+1;
var year = myDate.getFullYear();

if( curr_hour>=21 && ( day==17 && month==5 && year==2011 ) )
    document.getElementById('myPicture').src = 'source.jpg';

图片将在2011年5月17日21日之后更改（仅限当天）

在确定的时间更改图片

4 个答案: