en utilisant javascript/jQuery pour montrer certains éléments à certaines dates?

Question

Autant que le titre. On m'a demandé s'il était possible d'afficher une bannière spécifique dans une section sur un site Web à différents jours sans aucune intervention de l'utilisateur externe. Mes premières réflexions sont l'utilisation de javascript/jquery. Nous sommes limités avec la fonctionnalité cependant que le site est contrôlé par l'horreur qui est Netsuite.

Toute aide/idées sont appréciés :)

-Wayne

Answer 1

EDIT: En ce qui concerne votre commentaire, il semble que vous voulez charger un diaporama différent en fonction du jour de la semaine.

Voici un exemple générique simple de la façon dont cela pourrait être fait.

// 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 ](); 

Ceci appellera une fonction différente du tableau en fonction du jour de la semaine. Vous n'avez pas besoin de sept d'entre eux. Il va automatiquement tourner.

Il y a d'autres façons d'aborder cela, mais je devrais voir comment les diaporamas sont configurés. C'est une approche simple.

Si vous disposez de plus de 7 diaporamas différents, vous devrez les modifier un peu.

---

EDIT:Cette réponse suppose que vous vouliez dire par jour différent de la semaine. Je ne sais pas si c'était votre intention.

---

Ceci est probablement mieux que ma première réponse, car il ne nécessite pas de charger toutes les bannières.

javascript seule version

Exemple: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); 

---

la version jQuery

Exemple:http://jsfiddle.net/patrick_dw/5drgu/7/

(changé un peu il ne démarre pas avec un vide <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> 

---

réponse originale:

est ici une façon:

Exemple: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

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 3

La première pensée devrait être côté serveur.

Si ce n'est pas une option, vous pouvez le faire avec javascript/jquery avec les limitations qu'il apporte. Navigateurs compatibles Javascript.

Vous pouvez nommer vos fichiers en conséquence. image-19-7-2011.jpg et utilisez l'objet Date() pour créer le nom de fichier à utiliser pour la date actuelle.

Quelque chose comme

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

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

exemple à http://jsfiddle.net/rZaqx/

Answer 4

Cette réponse suppose que vous voulez une image bannière différente pour chaque jour de la semaine.

Si vous n'êtes pas en mesure de mettre à jour la bannière dans le backend alors il serait possible d'avoir toutes les bannières sur la page, caché avec le CSS display: none.

Ensuite, il suffit d'utiliser quelque chose comme:

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

Cela fonctionnera si vous avez 7 éléments nommés banner0 pour le dimanche, banner1 pour lundi, etc.

Sinon, si vous voulez juste changer l'image de la bannière, vous pouvez définir votre CSS comme ceci:

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 

Ensuite, votre jQuery pourrait ressembler à:

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

Bien sûr, la question Avec ces deux options, vous devez avoir une bannière différente pour chaque jour. Ils sont juste quelques façons que vous pouvez le faire (mais certainement pas les seuls moyens)