시간 기반 이미지 표시

Question

특정 시간에 특정 이미지를 표시하는 이미지 회전기를 만들려고하지만 그날 다른 시간에도 회전합니다.

처음 만들 때마다 3 초마다 회전 시켰습니다. 그게 잘 됐어. 그러나 일단 다른 시간에 다른 이미지가 나타나도록 코드를 추가하면 모두 함께 작동을 멈 춥니 다. 문제의 일부는 setInterval 및 clearInterval을 어디에 두어야하는지 혼란 스럽습니다. 어쨌든 여기에 코드가 있습니다.

 <img id="mainImage" src="/arts/rotatorpics/artzone.jpg" /> 

JS :

var myImage = document.getElementById("mainImage"); 
    var imageArray = ["arts/rotatorpics/artzone.jpg", 
     "arts/rotatorpics/bach.jpg", 
     "arts/rotatorpics/burns.jpg"]; 
    var imageIndex = 0; 
    var changeImage = function() { 
     mainImage.setAttribute("src", imageArray[imageIndex]); 
     imageIndex++; 
     if (imageIndex >= imageArray.length) { 
      imageIndex = 0; 
     } 

    } 

    var newDay = new Date(); //create a new date object 
    var dayNight = newDay.getHours(); //gets the time of day in hours 

    function displayImages() { 
     if (dayNight >= 10 && dayNight <= 12) { 
      mainImage.setAttribute("src", imageArray[1]); 
     } else if (dayNight >= 17 && dayNight <= 19) { 
      mainImage.setAttribute("src", imageArray[2]); 
     } else { 
      var intervalHandle = setInterval(changeImage, 3000); 
     } 
     myImage.onclick = function() { 
      clearInterval(intervalHandle); 
     }; 
    }​ 

Answer 1

는 우선, 모든 변수는 것 같다가, 그렇게 해달라고 즉시 코드를 (실행 익명 함수 래퍼를 사용하십시오, 전역 (약 IIFE here 읽기 .이 문제의 일부지만, 단지 좋은 깨끗한 코딩 스타일이 아니다.

(function() { 
    // your code here 
})(); 

다음 내가 문제 중 하나가 당신의 displayImages 기능, 당신 드 생각 결코 전화하지 말라. 당신이 당신의 이미지가 10 ~ 12과 17 ~ 19 코드는 다음 작업을해야 사이에 교환 할 수 없습니다 원하는 경우

단지 코드의 끝 부분을 호출해야

displayImages(); 

(또는 그냥 생략) 예상대로 이 시간에도 이미지를 교환해야한다면 마지막으로 setInterval을 넣으면 안됩니다 (displayImages-function 안에 있음)