javascript 카운트다운 코드 인 스 턴 스

javascript 카운트다운 코드 인 스 턴 스: 카운트다운 효 과 는 많은 장면 에서 응용 되 고 있 습 니 다. 예 를 들 어 수 능 카운트다운 이나 책 올림픽 카운트다운 등 이 효 과 를 어떻게 실현 하 는 지 상세 하 게 소개 합 니 다.코드 인 스 턴 스 는 다음 과 같 습 니 다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>javascript     -    </title>
<style type="text/css"> 
*
{ 
  margin:0; 
  padding: 0; 
} 
ul,li
{
  list-style:none;
} 
#show_time
{
  color:#f00;
  font-size:24px;
  font-weight:bold;
  margin:100px;
} 
</style> 
<script type="text/javascript"> 
function countdown()
{ 
  var show_time=document.getElementById("show_time"); 
  var endtime=new Date("12/31/2015 23:59:59"); 
  var today=new Date(); 
  var delta_T=endtime.getTime()-today.getTime();
  if(delta_T<0)
  { 
    clearTimeout(auto); 
    show_time.innerHTML="       "; 
  } 
  else
  {
    var total_days=delta_T/(24*60*60*1000); 
    var total_show=Math.floor(total_days); 
    var total_hours=(total_days-total_show)*24;
    var hours_show=Math.floor(total_hours);
    var total_minutes=(total_hours-hours_show)*60; 
    var minutes_show=Math.floor(total_minutes);
    var total_seconds=(total_minutes-minutes_show)*60;
    var seconds_show=Math.floor(total_seconds);
    show_time.innerHTML="      :"+total_show+" "+hours_show+" "+minutes_show+" "+seconds_show+" "; 
    var auto=setTimeout(countdown,1000);
  }
}
window.onload=function()
{
  countdown();
}
</script> 
</head> 
<body> 
<div id="show_time"></div> 
</body> 
</html>

상기 코드 는 우리 가 필요 로 하 는 카운트다운 효 과 를 실 현 했 습 니 다. 만기 가 되면 '카운트다운 이 끝 났 습 니 다' 라 는 힌트 를 드 리 겠 습 니 다. 다음은 다음 효과 의 실현 과정 을 상세 하 게 소개 합 니 다.
1. 실현 원리: 만 료 된 시간 을 설정 하고 현재 시간 과 비교 합 니 다. setTimeout () 함 수 를 통 해 countdown () 함 수 를 재 귀적 으로 호출 하여 1 초 에 한 번 씩 비교 하면 카운트다운 효 과 를 실현 할 수 있 습 니 다. 현재 시간 이 지정 한 시간 을 초과 하면 setTimeout () 함수 의 실행 을 중단 하고 힌트 를 드 립 니 다.2. 코드 설명: 1. function countdown () {}, 카운트다운 효 과 를 위 한 함 수 를 설명 합 니 다.2.var show_time = document. getElement ById ("show time"), id 속성 값 을 show 로 가 져 옵 니 다.time 의 요소 대상.3. var endtime = new Date ("12 / 31 / 2015 23: 59: 59"), 카운트다운 의 만 료 시간 을 설정 합 니 다.4. var today = new Date (), 현재 시간 을 가 져 오 는 데 사용 할 시간 대상 을 만 듭 니 다.5.var delta_T = endtime. getTime () - today. getTime (), 지정 한 만 료 시간 과 현재 시간의 시간 차 를 초 로 계산 합 니 다.getTime () 함수 에 대해 서 는 JavaScript 의 Date 대상 의 getTime () 방법 1 장 을 참조 할 수 있 습 니 다.6. if (dela T < 0), 0 보다 작 으 면 만 료 되 었 음 을 설명 합 니 다.7. clearTimeout (auto), setTimeout () 함수 의 실행 을 중지 합 니 다.8.show_time. innerHTML = "카운트다운 이 끝 났 습 니 다", showtime 의 내용 은 '카운트다운 이 끝 났 습 니 다' 로 설정 되 어 있 습 니 다.9.var total_days=delta_T/(24*60*60*1000)，delta_T 는 간격의 총 초 수 이 고 24 * 60 * 60 * 1000 은 하루 의 총 초 수 이 므 로 남 은 일 수 를 계산한다.10.var total_show = Math. floor (total days), 남 은 일 수 를 가 져 옵 니 다. 여기 서 주의해 야 할 것 은 Math. floor () 함 수 를 사용 하여 반올림 을 하 는 것 입 니 다. 그래 야 남 은 시간 과 아래 의 더 작은 시간 단 위 를 계산 할 수 있 기 때 문 입 니 다.11.var total_hours = (total days - total show) * 24, 총 일수 에서 반올림 일 수 를 뺀 다음 24 (하루 시간 수) 를 곱 하면 남 은 시간 수가 나온다.아래 에서 분 을 계산 하면 초 수도 마찬가지 이 니 여 기 는 더 이상 소개 하지 않 겠 습 니 다.12.show_time. innerHTML = "끝 날 때 까지 그리고:" + totalshow + "하늘" + hoursshow + "시간" + minutesshow + "분" + secondsshow + "초", 남 은 이 벤트 를 show 에 기록 합 니 다.타임 중.13. var auto = setTimeout (countdown, 1000), 1 초 간격 으로 countdown () 함 수 를 호출 합 니 다.14. window. onload = function () {}, 문서 가 완전히 불 러 오 면 함수 의 코드 를 실행 합 니 다.15. countdown (), 이 함 수 를 호출 합 니 다.3. 관련 내용: 1. Math. floor () 함 수 는 JavaScript 의 Math 대상 의 floor () 방법 1 장 을 참조 할 수 있 습 니 다. 2. setTimeout () 함 수 는 window 대상 의 setTimeout () 방법 1 장 을 참조 할 수 있 습 니 다.3. 시간 대상 은 ECMAScript 의 Date 대상 1 장 을 참조 할 수 있 습 니 다.
원문 주 소 는:http://www.softwhy.com/forum.php?mod=viewthread&tid=8405
더 많은 내용 은 참고 할 수 있다.http://www.softwhy.com/javascript/

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

javascript 카운트다운 코드 인 스 턴 스

좋은 웹페이지 즐겨찾기