테스트 사이트 - 개발 중인 베타 버전입니다

타이머 스크립트 수정해주실 분 채택완료

삼잇 11년 전 조회 4,548

쇼핑몰에 카운트 타이머를 달게 되었습니다.

미래의 정해진 특정시간까지 지금으로 부터 몇시간 몇분 몇초가 남았는지 카운트해주는 타이머입니다.

 

전 스크립트를 잘 모르기 때문에, 네이버에 뒤져서 스크립트를 하나 구했어요.

해당 스크립트는 클라이언트 PC별로 카운트 되는 것이 아니고, 서버 시간기준으로 일관성있는 카운트를 해주고 있어서 안성맞춤이었습니다.

 

그런데 문제는 해당일 해당 시간 즉, D-DAY가 되면 카운트가 0시간 0분 0초까지 되었다가 갑자기 다시 24시간 남은 것으로 카운트가 되더군요.

 

질문의 요지는,

원하는 미래의 시간 즉, D-DAY에 도래하면 위 카운트가 '0시간 0분 0초 남음' 으로 된 후 그냥 멈춰버렸음 하는데요.

스크립트를 공부하고 있는 초보자인데 도저히 제 실력으론 할 수가 없습니다.

 

고수님들의 도움 부탁드려요.. 이번 기회로 많은 배움이 되었음 합니다.

해당 스크립트 소스는 아래와 같습니다.

 

</p><p> </p><p><span style="font-size: 10pt; line-height: 1.5;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank" rel="noopener noreferrer">http://www.w3.org/TR/html4/loose.dtd</a>"><a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank" rel="noopener noreferrer">http://www.w3.org/TR/html4/loose.dtd</a></a>"></span></p><p><html></p><p><head></p><p> </p><p><SCRIPT language=JavaScript> </p><p> </p><p>function getTime() { </p><p>now = new Date(); </p><p>dday = new Date(2014,02,14,23,00,00); // 원하는 날짜, 시간 정확하게 초단위까지 기입.</p><p>days = (dday - now) / 1000 / 60 / 60 / 24; </p><p>daysRound = Math.floor(days); </p><p>hours = (dday - now) / 1000 / 60 / 60 - (24 * daysRound); </p><p>hoursRound = Math.floor(hours); </p><p>minutes = (dday - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound); </p><p>minutesRound = Math.floor(minutes); </p><p>seconds = (dday - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound); </p><p>secondsRound = Math.round(seconds); </p><p> </p><p>document.getElementById("counter1").innerHTML = hoursRound; </p><p>document.getElementById("counter2").innerHTML = minutesRound; </p><p>document.getElementById("counter3").innerHTML = secondsRound; </p><p>newtime = window.setTimeout("getTime();", 1000); </p><p>} </p><p> </p><p></SCRIPT></p><p><SCRIPT>getTime()</SCRIPT></p><p> </p><p><STYLE type="text/css"></p><p>/*타임*/</p><p>#count {</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>height: 167px;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>color: #000;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>padding-left: 100px;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>padding-top:130px;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>background-repeat: no-repeat;</p><p>}</p><p>#bt {</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>height: 16px;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>width: 49;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>padding-left: 100px;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>padding-top: 0px;</p><p>}</p><p></STYLE></p><p></head></p><p> </p><p><body></p><p>  <TABLE cellSpacing=0 cellPadding=0></p><p>      <TBODY></p><p>        <TR></p><p>           <TD height=167 width=256></p><p>                 <DIV id=count></p><p>                    <SPAN style="FONT: bold 12px; COLOR: #000" id=counter1></SPAN>시간</p><p>                    <SPAN style="FONT: bold 12px;  COLOR: #000" id=counter2></SPAN>분</p><p>                    <SPAN style="FONT: bold 12px; COLOR: #000" id=counter3></SPAN>초 남음</p><p>                    <SPAN style="padding-left:30px;"></SPAN></p><p>                 </div></p><p>           </TD></p><p>        </TR></p><p>      </TBODY></p><p>  </TABLE></p><p> </p><p> </p><p></body></p><p></html> </p><p> </p><p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

답변에 대한 댓글 1개

삼잇
11년 전
오우~~ ㅎㅎ 정말 감사합니다~~

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인