완성품

측면 설정

index.html

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <p>東京オリンピックまであと</p>
        <div id="result"></div>
        <script src="countdown.js"></script>
    </body>
</html>

그게 다야.
바디의 마지막 js를 읽은 다음, getElementById로result를 읽기 위해서.

JavaScript 측면 설정

countdown.js


var endDate = new Date('2020/07/24 00:00:00');
var interval = 1000;


function countdownTimer(){
  var nowDate = new Date();
  var period = endDate - nowDate ;
  var addZero = function(n){return('0'+n).slice(-2);}
  var addZeroDay = function(n){return('0'+n).slice(-3);}
  if(period >= 0) {
  var day = Math.floor(period / (1000 * 60 * 60 * 24));
  period -=  (day　*(1000 * 60 * 60 * 24));
  var hour = Math.floor(period / (1000 * 60 * 60));
  period -= (hour *(1000 * 60 * 60));
  var minutes =  Math.floor(period / (1000 * 60));
  period -= (minutes * (1000 * 60));
  var second = Math.floor(period / 1000);
  var insert = "";
  insert += '<span class="h">' + addZeroDay(day) +'日' + '</span>';
  insert += '<span class="h">' + addZero(hour) + '時'+'</span>';
  insert +=  '<span class="m">' + addZero(minutes) +'分' + '</span>';
  insert += '<span class="s">' + addZero(second)+ '秒'+ '</span>';
  document.getElementById('result').innerHTML = insert;
  setTimeout(countdownTimer,10);
  }
  else{
    var insert = "";
    var number = 0;
    insert += '<span class="h">' + number + number + '</span>';
    insert +=  '<span class="m">' + number + number + '</span>';
    insert += '<span class="s">' + number + number + '</span>';
    document.getElementById('result').innerHTML = insert;
  }
}

countdownTimer();

설명 좀 해주세요.
endDate를 목표로 하는 날짜를 주고 nowDate와 줄여서 목표 날짜까지의 차이를 발생시킵니다.하지만 단지 이렇다면 날짜, 시간, 분 등을 잘 구분하지 못했기 때문에 나눠준다.
countdown.js

  var day = Math.floor(period / (1000 * 60 * 60 * 24));
  period -=  (day　*(1000 * 60 * 60 * 24));
  var hour = Math.floor(period / (1000 * 60 * 60));
  period -= (hour *(1000 * 60 * 60));
  var minutes =  Math.floor(period / (1000 * 60));
  period -= (minutes * (1000 * 60));
  var second = Math.floor(period / 1000);

여기는period와 각 단위를 일치시킨다.
countdown.js

var insert = "";
  insert += '<span class="h">' + addZeroDay(day) +'日' + '</span>';
  insert += '<span class="h">' + addZero(hour) + '時'+'</span>';
  insert +=  '<span class="m">' + addZero(minutes) +'分' + '</span>';
  insert += '<span class="s">' + addZero(second)+ '秒'+ '</span>';
  document.getElementById('result').innerHTML = insert;

변수에 각자의 단위를 저장한 후 실제 표시를 위해 insert에 들어갑니다.
스폰에 각자의 값을 끼우면 숫자의 장식이 가능합니다.
그러나 변수로 직접 표시하면 한 자릿수 숫자 때 사이즈가 바뀌어 레이아웃 디자인이 붕괴된다.거기에ddZero를 사용합니다.
countdown.js

  var addZero = function(n){return('0'+n).slice(-2);}
  var addZeroDay = function(n){return('0'+n).slice(-3);}

addZeroDay는 addZero만 있으면 세 자릿수를 표시할 때 레이아웃이 붕괴될 수 있기 때문에 때때로 세 자릿수를 표시하는 데이에만 적용됩니다.
타격만 썼기 때문에 적당히 통속적이고 알기 쉽게 다시 써야 돼...

Reference

이 문제에 관하여(JavaScript로 카운트다운 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/piesuke0727/items/91333b9a1ba8fe051be2

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

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다