자바스크립트로 카운트다운 타이머 만들기

14853 단어 HTMLCSS자바스크립트
HTML + CSS + JavaScript로 카운트 다운 타이머를 만들었습니다. 소스 코드에 직접 기술한 일시까지 카운트다운합니다.



URL
h tps:// 기주 b. 이오 / 코 t tw wn_chime r_js /

소스 코드
htps : // 기주 b. 코 m / 코 r에서 아 아시 xth / 코 t 드 wn_ Chime r_js

디렉토리 구성


app
 ├── index.html
 ├── script.js
 ├── style.css
 └── background.jpeg


index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Time left in 2021</h1>

  <div class="countdown-container">
    <div class="countdown-elm">
      <p class="time-text" id="days">0</p>
      <span>days</span>
    </div>
    <div class="countdown-elm">
      <p class="time-text" id="hours">0</p>
      <span>hours</span>
    </div>
    <div class="countdown-elm">
      <p class="time-text" id="mins">0</p>
      <span>mins</span>
    </div>
    <div class="countdown-elm">
      <p class="time-text" id="seconds">0</p>
      <span>seconds</span>
    </div>
  </div>
</body>
</html>

script.js
const daysElm = document.getElementById('days');
const hoursElm = document.getElementById('hours');
const minsElm = document.getElementById('mins');
const secondsElm = document.getElementById('seconds');

// ここに好きな日時を記述する
// 西暦 月　日
const target = '2022 1 1';

function countDown() {
  const targetDate = new Date(target);
  const currentDate = new Date();

  const totalSeconds = (targetDate - currentDate) / 1000;

  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const mins = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds % 60);

  daysElm.innerHTML = days;
  hoursElm.innerHTML = formatTime(hours);
  minsElm.innerHTML = formatTime(mins);
  secondsElm.innerHTML = formatTime(seconds);
}

function formatTime(time) {
  return time < 10 ? `0${time}` : time;
}

setInterval(countDown, 1000);
countDown() 가 타이머 처리입니다. setInterval() 에 의해 초당 호출되어 시간이 업데이트됩니다.
formatTime() 로 표시되는 시간을 성형하고 있습니다. 시간, 분, 초가 10 이하인 경우는 항상 0을 표시시켜 레이아웃이 무너지는 것을 막고 있습니다.


style.css
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-image: url(./background.jpeg);
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
}

h1 {
  font-weight: normal;
  font-size: 4rem;
  margin-top: 5rem;
}

.countdown-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.time-text {
  font-weight: bold;
  font-size: 6rem;
  line-height: 1;
  margin: 1rem 2rem;
}

.countdown-elm {
  text-align: center;
}

.countdown-elm span {
  font-size: 1.2rem;
}


끝에



시간 계산 방법이 매우 공부되었습니다. 이런 단위 환산이 약하기 때문에 .... 다음은 일시를 입력할 수 있는 폼을 추가하거나, 복수의 타이머를 표시할 수 있도록 해 보고 싶네요!

읽어 주셔서 감사합니다! 피드백해 주시면 기쁩니다!

URL
h tps:// 기주 b. 이오 / 코 t tw wn_chime r_js /

소스 코드
htps : // 기주 b. 코 m / 코 r에서 아 아시 xth / 코 t 드 wn_ Chime r_js

참고





링크



Github
htps : // 기주 b. 코 m / 코 r에서 아시 xth

Products
htps : // 라이언 d로 p. 이오 / 코 r ぃ 아 / my p 로즈 cts - 18715918

Qiita
htps : // 코 m / 코 r

트위터
htps : // 라고 해서 r. 코 m / 코 r로 ぃあ_し xth
Astro에 Vue 3를 설치하는 방법
사용자 인터페이스 자동화의 과제: 새로운 접근 방식

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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