javascript/jQuery를 사용하여 특정 날짜에 특정 요소를 표시 하시겠습니까?

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 명이 필요하지 않습니다. 자동으로 회전합니다.

다른 접근 방법이 있지만 슬라이드 쇼 설정 방법을 알아야합니다. 이것은 간단한 접근법입니다.

7 개 이상의 슬라이드 쇼가있는 경우 약간 변경해야합니다.

---

편집 :이 답변은 당신이 요일마다 다른 의미 가정. 그것이 당신의 의도인지 확실하지 않습니다.

---

이것은 모든 배너를로드 필요로하지 않기 때문에 내 원래의 대답보다 아마 더 낫다.

자바 스크립트 버전 만

예 :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 버전

예 : 01

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

23,482,641,은 (는 빈 <img>로 시작하지 않는 있도록 조금 변경)

<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

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

여기 한 방법첫 번째 생각은 서버 쪽이어야합니다.

그런 다음 옵션이 없다면 javascript/jquery를 사용하여 제한 사항을 적용하면됩니다. Javascript 지원 브라우저.

따라서 파일 이름을 지정할 수 있습니다. image-19-7-2011.jpg을 사용하고 Date() 개체를 사용하여 현재 날짜에 사용할 파일 이름을 만듭니다. http://jsfiddle.net/rZaqx/

Answer 4

에서

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

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

예와 같이

는

뭔가이 대답은 당신이 각 요일에 대해 다른 배너 이미지를 원하는 가정합니다.

백엔드에서 배너를 업데이트 할 수없는 경우 CSS의 display: none으로 숨겨진 페이지의 모든 배너를 가질 수 있습니다. 당신이 등 일요일, 월요일에 banner1을위한 7 개 요소라는 이름의 banner0이있는 경우 작동

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

이를 :

은 그럼 그냥 같은 것을 사용그냥 배너 이미지를 변경하려면

또는, 당신은 다음처럼 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()); 

, 문제 두 옵션 모두 매일 매일 다른 배너를 가져야한다는 것입니다. 그들은 당신이 그것을 할 수있는 몇 가지 방법 일뿐입니다 (그러나 유일한 방법은 아닙니다).