시간이 바뀌면 이미지를 회전하는 방법은 무엇입니까?

Question

최근에 this과 같은 웹 사이트 용 카운트 다운 타이머를 만들었습니다! 그것은 내가 온라인에서 찾은 2 개의 스크립트를 조합 한 것입니다.

카운트 다운은 2 월 1 일에 카운트 다운되며 꽤 고정적입니다. 그러나 'clockpicture'는 매초 6 도씩 회전해야합니다 (페이지 소스 참조). 그러나 시계 사진은 페이지가로드되는 순간부터 카운팅을 시작합니다. 따라서 2 초 사이에 도착하면 카운트 다운과 비교하여 0.5 초가 걸릴 것입니다.

카운트 다운 변경시 사진 회전을 '연결'할 수있는 방법이 있습니까?

도움을 주시면 감사하겠습니다.

Answer 1

편집

영업 이익과 토론을 바탕으로, 마지막으로 나는 해결책을 찾아 냈다. 문제는 브라우저가 회전을 처리하는 방법이었습니다.

좋아, 그럼, 그 애니메이션 gif를 제거하고 거기에 애니메이션을하십시오. 스크립트 상단에 var degrees = 0이라는 전역 변수를 만듭니다. 그런 다음 jsfiddle에없는 작품, 어떤 이유로 0

으로 재설정,하지만 당신은 확인할 수는 360에 도달하면 모든 학위는 6으로 체크하는 것이 incrase 필요가 그것을 on my site. Live demo

그런 다음 tick 기능에 :

if (amount < 0) { 
    expired.push(idx); 
} 
// date is still good 
else { 
    this.display(cnt, this.format(this.math(amount))); 
    if (degrees === 360) { 
     degrees = 0; 
    } 
    degrees += 6; 
    obj = document.getElementById('clock'); 
    if (navigator.userAgent.match("Chrome")) { 
     obj.style.WebkitTransform = "rotate(" + degrees + "deg)"; 
    } else if (navigator.userAgent.match("Firefox")) { 
     obj.style.MozTransform = "rotate(" + degrees + "deg)"; 
    } else if (navigator.userAgent.match("MSIE")) { 
     obj.style.msTransform = "rotate(" + degrees + "deg)"; 
    } else if (navigator.userAgent.match("Opera")) { 
     obj.style.OTransform = "rotate(" + degrees + "deg)"; 
    } else { 
     obj.style.transform = "rotate(" + degrees + "deg)"; 
    } 
} 

Answer 2

O 이놈은 참으로 그것은 죄송합니다, .gif 인이었다. 이미지를 작동시킬 수 없기 때문에 배치했습니다. 하지만 지금은 올바른 이미지로 작업하려고합니다. 조언 해 주셔서 감사합니다! 나는 아래로왔다 :

 if (amount < 0) { 
     expired.push(idx); 
      } 
     // date is still good 
     else { 
     this.display(cnt, this.format(this.math(amount))); 
     var obj = document.getElementById("clock"); 

     ("clock").style.transform = "rotate(6deg)"; 

      } 
    } 

그러나 여전히 움직이지 않는다. 내 실수를 발견 할 수 있니?