Question

就像标题一样。我被问到是否可以在不同日期的网站上显示特定横幅，而无需任何外部用户输入。

我的第一个想法是使用javascript / jquery。我们受到功能的限制，因为该网站受到Netsuite恐怖的控制。

感谢任何帮助/想法：）

-Wayne

Answer 1

编辑：关于您的评论，您可能会想要根据星期几加载不同的幻灯片。

这是一个如何完成的简单通用示例。

  // Insert the code that loads the individual slideshows in the functions below
var slideshows = [
    function() { /* insert code to load some slideshow */ },
    function() { /* insert code to load some other slideshow */ },
    function() { /* insert code to load a different slideshow */ },
    function() { /* insert code to load yet another slideshow */ }
];
  // call a slideshow function depending on the day of week
slideshows[ new Date().getDate() % slideshows.length ]();

这将根据星期几从阵列调用不同的函数。你不需要七个。它会自动旋转。

还有其他方法可以解决这个问题，但我需要了解幻灯片的设置方式。这是一种简单的方法。

如果您有超过7个不同的幻灯片，则需要进行一些更改。

编辑： 此答案假设您每周的意思不同。不确定这是不是你的意图。

这可能比我原来的答案要好，因为它不需要加载所有横幅。

javascript only version

示例： http://jsfiddle.net/patrick_dw/5drgu/4/

var banners = [
    "http://dummyimage.com/120x90/f00/fff.png&text=my+image",
    "http://dummyimage.com/120x90/0f0/fff.png&text=my+image",
    "http://dummyimage.com/120x90/00f/fff.png&text=my+image",
    "http://dummyimage.com/120x90/ff0/fff.png&text=my+image"
    ];
var banner = new Image();
banner.src = banners[ new Date().getDate() % banners.length ];
document.getElementById('container').appendChild( banner );

jQuery版

示例： http://jsfiddle.net/patrick_dw/5drgu/7/

（稍微改了一下，所以不会以空<img>开头）

var banners = [
    "http://dummyimage.com/120x90/f00/fff.png&text=my+image",
    "http://dummyimage.com/120x90/0f0/fff.png&text=my+image",
    "http://dummyimage.com/120x90/00f/fff.png&text=my+image",
    "http://dummyimage.com/120x90/ff0/fff.png&text=my+image"
    ];
var banner =  $('<img>', { src:banners[ new Date().getDate() % banners.length ]})
                          .appendTo('#container');

HTML 的

<div id='container'></div>

原始回答：

~~这是一种方式：~~

示例： http://jsfiddle.net/patrick_dw/5drgu/

var banners = $('#container img').hide(); banners.eq( new Date().getDate() % banners.length ).show();

html

<div id='container'> <img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" /> <img src = "http://dummyimage.com/120x90/0f0/fff.png&text=my+image" /> <img src = "http://dummyimage.com/120x90/00f/fff.png&text=my+image" /> <img src = "http://dummyimage.com/120x90/ff0/fff.png&text=my+image" /> </div>

Answer 2

第一个想法应该是服务器端。

如果这不是一个选项，那么你可以使用javascript / jquery来实现它带来的限制。支持Javascript的浏览器。

您可以相应地命名您的文件，即。 image-19-7-2011.jpg并使用Date()对象创建用于当前日期的文件名。

像

这样的东西

var d = new Date();
var filename = 'image-' + d.getDate() + '-' + d.getMonth() + '-' + d.getFullYear() + '.jpg';

document.getElementById('banner').src = '/path/to/' + filename;

示例http://jsfiddle.net/rZaqx/

Answer 3

var now = new Date();
var date = now.getMonth() + "-" + now.getDay();
switch(date) {
  case "04-01":
    $('<p>APRIL FOOLS!</p>').appendTo("body");
    break;
  case "01-01":
    $('<p>Happy New Year!</p>').appendTo("body");
    break;
}

Answer 4

这个答案假定您想要一周中每一天的不同横幅图像。

如果您无法更新后端的横幅广告，那么就可以在页面上显示所有横幅，并使用CSS display: none隐藏。

然后使用类似的东西：

var date = new Date();
$("#banner" + date.getDay()).show();

如果您有7个名为banner0的星期日，banner1代表星期一等，

，这将有效

或者，如果您只想更改横幅图像，则可以像这样设置CSS：

div#banner { background-image: url(default.jpg)} // Common styling
div#banner.day0 { background-image: url(image0.jpg); } // Image for Sunday
div#banner.day1 { background-image: url(image1.jpg); } // Image for Monday
div#banner.day2 { background-image: url(image2.jpg); } // Image for Tuesday

然后你的jQuery看起来像：

var date = new Date(); 
$("div#banner").addClass("day" + date.getDay());

当然，这两个选项的问题在于您需要每天都有不同的横幅。他们只是你可以做到的一些方法（但绝对不是唯一的方法）

使用javascript / jQuery在某些日期显示某些元素？

4 个答案: