Question

我正在使用以下javascript根据一天中的时间显示不同的图片：

$(document).ready(function(){
var d = new Date();
var n = d.getHours();
if (n > 19 || n < 6)
  // If time is after 7PM or before 6AM, apply night theme to ‘body’
  document.body.className = "night";
else if (n > 16 && n < 19)
  // If time is between 4PM – 7PM sunset theme to ‘body’
  document.body.className = "sunset";
else
  // Else use ‘day’ theme
  document.body.className = "day";
});

http://codepen.io/jamesbarnett/pen/kdDBL

但是我需要在一周中的某一天定义背景图像。

因此，例如周一，上午6点至中午12点之间的时间显示开放图像，下午12点至下午6点显示关闭图像，然后周二早上6点至下午4点显示打开图像，下午4点至8点显示关闭图像。从示例中可以看出，每天都有不同的开启和关闭时间。因此，需要在javascript中定义一周中的每一天。

我玩过以下的javascript并定义了每一天的每个图片和时间，但似乎无法让它运转起来：

var days = [
'SUN', //Sunday starts at 0
'MON',
'TUE',
'WED',
'THU',
'FRI',
'SAT'
];

任何能提供帮助的人都将不胜感激。

由于

Answer 1

使用此脚本根据一天中的时间更改图片（或横幅）。使用起来非常简单！

源代码：

将此源代码粘贴到指定区域。

外部文件：

将此代码粘贴到名为：timePictureChange.js

的外部JavaScript文件中

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Anonymous | http://musikimiz.googlepages.comLicensed under: Creative Commons License
 */

function pixTimeChange() {
  var t=new Date();
  var h = t.getHours();
  var r1="pic1.gif";
  var r2="pic2.gif";
  var el=document.getElementById('myimage');

  // See the time below. Note: The time is in 24 hour format.
  // In the example here, "7" = 7 AM; "17" =5PM.
  el.src = (h>=7 && h<17) ? r1 : r2;
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  pixTimeChange();
});

<强>头

将此代码粘贴到HTML文档的HEAD部分。

<script type="text/javascript" src="timePictureChange.js"></script>

<强>车身

将此代码粘贴到HTML文档的BODY部分。

<img src="" id="myimage" alt="time of day">

希望这会有所帮助......

Answer 2

您可以使用指定的日期/时间创建一个Date对象（例如var d = new Date（＆＃39; June 18,2011 21：00：00＆＃39;）;）然后您可以比较当前日期加载页面时指定的日期：

var d = new Date('September 25, 2014 23:23:00');
var current = new Date();
if(current > d) {
    document.getElementById("imageID").src = "newImage.png";
}

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

Answer 3

在您的代码中没有括号。

然后用一天修改你的范围

$(document).ready(function () {

    var d = new Date();
    var weekday = new Array(7);
    weekday[0]=  "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";

    var day = weekday[d.getDay()];


        var n = d.getHours();



        if ((n > 19 || n < 6)&&(day==1))  {
          // If time is after 7PM or before 6AM, apply night theme to ‘body’
        ;
          document.body.className = "night";
        }
        else if (n > 16 && n < 19){
          // If time is between 4PM – 7PM sunset theme to ‘body’

           document.body.className = "sunset";
        }
        else{

          // Else use ‘day’ theme
           document.body.className = "day";
        }
    });

使用javascript按周工作日设置背景图像

3 个答案: