18 줄의 JavaScript에서 카운트 다운 타이머 구축-JS 튜토리얼-php.cn

Build a Countdown Timer in Just 18 Lines of JavaScript 이벤트, 프로모션 또는 게임이든 JavaScript 카운트 다운 시계를 구축해야합니다. 플러그인에 의존하지 않고 기본 JavaScript를 사용하여 시계를 만들 수 있습니다. 우수한 시계 플러그인이 많이 있지만 기본 JavaScript를 사용하는 다음과 같은 장점이 있습니다.

코드 경량, 제로 의존성.

~~웹 사이트는 외부 스크립트와 스타일 시트를로드하지 않고 더 잘 수행됩니다.~~

더 많은 제어를 통해 플러그인을 요구하지 않고 시계의 동작을 정확하게 제어 할 수 있습니다.

다음은 18 줄의 JavaScript 코드로 나만의 카운트 다운 시계를 만드는 방법입니다.

당신은 의존성없이 JavaScript를 사용하여 가볍고 효율적인 카운트 다운 클럭을 구축 할 수있어 외부 스크립트와 스타일 시트를로드하지 않고 더 나은 성능과 제어를 제공 할 수 있습니다.

이 프로세스에는 유효한 종료 날짜 설정, 남은 시간 계산, 사용 가능한 형식으로 변환, 시계 데이터를 재사용 가능한 객체로 출력하고 페이지의 클록을 표시하고 0에 도달하면 중지하는 것이 포함됩니다.

초기 지연을 제거하고 스크립팅 효율성을 향상시키기 위해 시계의 숫자 만 업데이트하고 필요에 따라 주요 0을 추가하여 시계 디스플레이를 최적화 할 수 있습니다.

일부 사용 사례의 경우 시계를 자동으로 예약하고 사용자가 도착할 때 특정 시간 동안 타이머를 설정하고 쿠키에서 시계의 종료 시간을 저장하여 페이지 전체에서 시계 진행을 유지하는 등 시계를 확장 할 수 있습니다.

기억해야 할 중요한 경고 중 하나 : JavaScript 날짜와 시간은 사용자의 컴퓨터에서 가져옵니다. 즉, 사용자는 컴퓨터의 시간을 변경하여 JavaScript 시계에 영향을 줄 수 있습니다. 매우 민감한 상황에서는 서버에서 시간을 얻어야 할 수도 있습니다. 기본 시계 : 특정 날짜 또는 시간에 대한 카운트 다운 기본 시계를 만드는 데는 다음 단계가 필요합니다

유효한 종료 날짜를 설정하십시오.

남은 시간을 계산합니다.

사용 가능한 형식으로 시간을 변환합니다.

재사용 가능한 객체로 클록 데이터를 출력합니다.

페이지의 시계를 표시하고 0에 도달하면 시계가 중지됩니다.

유효한 종료 날짜를 설정하십시오 먼저 유효한 종료 날짜를 설정해야합니다. 이것은 JavaScript의 메소드를 사용하여 모든 형식으로 이해할 수있는 문자열이어야합니다. 예를 들면 : ISO 8601 형식 :

<:> 짧은 형식 :

또는 긴 형식 :

각 형식을 사용하면 정확한 시간과 시간대를 지정할 수 있습니다 (또는 ISO 날짜의 경우 UTC에서 오프셋을 지정). 예를 들면 :

이 기사에서 JavaScript 날짜 형식에 대한 자세한 내용을 읽을 수 있습니다.

나머지 시간을 계산하십시오 다음 단계는 나머지 시간을 계산하는 것입니다. 주어진 종료 시간을 나타내는 문자열을 수락하는 함수를 작성해야합니다 (위에서 설명한대로). 그런 다음 해당 시간과 현재 시간의 차이를 계산합니다. 아래에 표시된대로 :

먼저, 마감일 전에 나머지 시간을 절약하기 위해 변수

를 만듭니다. 함수는 시간 문자열을 밀리 초의 값으로 변환합니다. 이것은 우리가 서로 두 번 빼고 둘 사이에 시간을 얻을 수있게합니다.

사용 가능한 형식으로 시간을 변환하십시오 이제 우리는 밀리 초를 며칠, 시간, 몇 분, 초로 변환하려고합니다. 예를 들어 몇 초가 걸리겠습니다 :

const deadline = '2015-12-31';

로그인 후 복사

여기서 무슨 일이 일어나고 있는지 분해합시다. total Date.parse() 는 밀리 초를 1000에서 초로 나눕니다 총 1 초를 60으로 나누고 나머지를 얻습니다. 당신은 모든 초가 필요하지 않으며, 분 후 남은 초만 계산하면됩니다. (t/1000) % 60

가장 가까운 정수로 반올림하십시오. 이것은 두 번째의 분수 부분이 아니라 몇 초가 필요하기 때문입니다.

const deadline = '31/12/2015';

로그인 후 복사

이 논리를 반복하여 밀리 초를 몇 분, 시간 및 며칠로 변환하십시오.

재사용 가능한 객체

로서의 출력 클록 데이터 날, 시간, 분, 초를 준비 할 때 이제 데이터를 재사용 가능한 객체로 반환 할 수 있습니다.

이 개체를 사용하면 기능을 호출하고 계산 된 값을 얻을 수 있습니다. 남은 분을 얻는 방법의 예는 다음과 같습니다.

편리합니까?

const deadline = 'December 31 2015';

로그인 후 복사

시계를 보여주고 0에 도달하면 멈추십시오 <🎜

이제 우리는 남은 날, 몇 시간, 분, 초에 출력하는 기능을 가지고 있으며 시계를 만들 수 있습니다. 먼저 시계를 저장하기 위해 다음 HTML 요소를 만들 것입니다.

그러면 시계 데이터를 새로운 div에 출력하는 함수를 작성합니다.

이 함수는 두 개의 매개 변수를 사용합니다. 그것들은 시계와 카운트 다운의 종료 시간을 포함하는 요소의 ID입니다. 함수 내부에서는

변수를 선언하여 시계 컨테이너 DIV에 대한 참조를 저장하는 데 사용합니다. 이것은 우리가 DOM을 계속 쿼리 할 필요가 없다는 것을 의미합니다.

다음으로, 우리는 <🎜 🎜>를 사용하여 초당 익명 함수를 실행합니다. 이 함수는 다음을 수행합니다.

남은 시간을 계산합니다.

남은 시간을 우리의 div에 출력하십시오. Math.floor( (t/1000) % 60 ) 남은 시간이 0에 도달하면 시계를 중지하십시오.

<,>이 시점에서 나머지 단계는 다음과 같이 시계를 실행하는 것입니다.

축하합니다! 이제 기본 시계를 갖기 위해 18 줄의 JavaScript 코드 만 있습니다.

시계를 표시 할 준비 <🎜

시계 스타일을 설정하기 전에 조금 향상시켜야합니다.

시계가 즉시 표시되도록 초기 지연을 제거하십시오.

전체 시계를 지속적으로 재구성하지 않도록 시계 스크립트를 더 효율적으로 만드십시오.

필요에 따라 주요 0을 추가하십시오.

초기 지연을 삭제하십시오 <,> 시계에서는

를 사용하여 매 초마다 디스플레이를 업데이트합니다. 이것은 대부분의 경우 괜찮지 만 처음에는 두 번째 지연이있을 것입니다. 이 지연을 제거하려면 간격이 시작되기 전에 시계를 한 번 업데이트해야합니다.

전달 된 익명 함수를

로 옮기겠습니다. 이 함수의 이름을 로 지정할 수 있습니다. 외부에서 함수를 호출하고 <🎜 🎜> 내부에서 다시 호출하십시오. 이런 식으로 시계는 지연없이 표시됩니다.

JavaScript에서 다음을 교체하십시오

<:> 다음을 사용하십시오 setInterval 시계의 지속적인 재건을 피하십시오 우리는 시계 스크립트를보다 효율적으로 만들어야합니다. 우리는 매 초마다 시계 전체를 재건하는 대신 시계의 숫자 만 업데이트하고 싶습니다. 이를 수행하는 한 가지 방법은 각 숫자를 <🎜 🎜> 태그 내에 넣고

컨텐츠 만 업데이트하는 것입니다.

이것은 html : <🎜 🎜>입니다 setInterval 이제이 요소에 대한 참조를 받자. updateClock variable setInterval를 정의한 후 다음 코드를 추가하십시오. updateClock 다음, 숫자 만 업데이트하려면 <🎜 🎜> 함수를 변경해야합니다. 새 코드는 다음과 같습니다. setInterval

주요 0을 추가하십시오 이제 시계가 더 이상 매 초마다 재건되지 않았으므로, 우리는해야 할 일이 하나 더 있습니다 : 주요 0을 추가하십시오. 예를 들어, 시계는 7 초를 표시하지 않지만 07 초를 표시합니다. 쉬운 방법은 숫자의 시작 부분에 "0"문자열을 추가 한 다음 마지막 두 자리를 차단하는 것입니다.

예를 들어, 선행 0을 "초"값에 추가하려면 다음을 변경할 수 있습니다.

<<>이를 위해 : <🎜 🎜>

const deadline = '2015-12-31';

로그인 후 복사

원하는 경우 선행 0을 몇 분과 몇 시간에 추가 할 수도 있습니다. 당신이 지금까지왔다면 축하합니다! 이제 시계를 표시 할 수 있습니다.

참고 : 카운트 다운을 시작하려면 Codepen에서 "RERUN"을 클릭해야 할 수도 있습니다.

한 걸음 더 나아가

const deadline = '31/12/2015';

로그인 후 복사

다음 예제는 일부 사용 사례에 대해 시계를 확장하는 방법을 보여줍니다. 그것들은 모두 위에서 볼 수있는 기본 예를 기반으로합니다.

는 시계를 자동으로 예약합니다 우리가 다른 날이 아닌 며칠 동안 시계가 표시되기를 원한다고 가정합니다. 예를 들어, 우리는 다가오는 일련의 이벤트가있을 수 있으며 매번 시계를 수동으로 업데이트하고 싶지 않습니다. 사전에 물건을 정리하는 방법은 다음과 같습니다.

시계의 <🎜 🎜> 속성을 <🎜 🎜>로 설정하여 시계를 숨 깁니다. 그런 다음 <🎜 🎜>로 시작한 후 <🎜 🎜> 함수에 다음을 추가하십시오. 이렇게하면

기능을 호출 한 후에 만 시계가 나타납니다. <span> 다음, 시계가 표시 해야하는 날짜 범위를 지정할 수 있습니다. 이것은 <<> 변수를 대체합니다

const deadline = '2015-12-31';

로그인 후 복사

배열의 각 요소는 시작 날짜와 종료 날짜를 나타냅니다. 위에서 언급했듯이 시간과 시간대가 포함될 수 있지만 여기에서 일반 날짜를 사용하여 코드를 읽을 수 있도록합니다.

마지막으로, 사용자가 페이지를로드하면 지정된 시간 범위 내에 있는지 확인해야합니다. 이 코드는 이전 호출을 schedule 함수로 바꿔야합니다.

이제 수동으로 업데이트하지 않고 시계를 미리 예약 할 수 있습니다. 필요에 따라 코드를 단축 할 수 있습니다. 가독성을 위해 코드를 장악하게 만듭니다. initializeClock <-m> 사용자가 도착하면 10 분 타이머를 설정하십시오 사용자가 도착하거나 특정 작업을 시작한 후 주어진 시간 동안 카운트 다운을 설정해야 할 수도 있습니다. 여기서는 10 분 타이머를 설정하지만 원하는 시간을 사용할 수 있습니다.

우리는 <🎜 🎜> 변수를 다음으로 바꾸면됩니다.