집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 카운트다운 타이머를 만드는 방법

CSS를 사용하여 카운트다운 타이머를 만드는 방법

WBOY원래의: 2024-08-29 06:31:021196검색

작가: Carlos Mucuho✏️

카운트다운 타이머는 이벤트, 판매, 사용자 참여 기능을 향상시켜 많은 웹사이트에서 인기 있는 기능입니다. JavaScript는 웹의 동적 동작에 일반적으로 사용되지만 CSS만 사용하여 기능적이고 시각적으로 매력적인 카운트다운 타이머를 만드는 것도 가능합니다.

이 튜토리얼에서는 기본 JavaScript 카운트다운 타이머부터 시작하여 CSS 전용 카운트다운 타이머로 이동하는 두 가지 접근 방식을 모두 살펴보겠습니다. 마지막에는 Chrome DevTools를 사용하여 두 접근 방식의 성능을 비교하고 각각의 장단점에 대해 논의하겠습니다.

기본 JavaScript 카운트다운 타이머 만들기

매초 업데이트되는 간단한 카운트다운 타이머를 만드는 것부터 시작하겠습니다. 타이머에는 작동을 제어하기 위한 시작 및 일시 정지 버튼이 포함됩니다.

디렉터리 구조 만들기

JavaScript 카운트다운 타이머를 만들기 전에 이 튜토리얼 전체에서 빌드할 애플리케이션을 저장할 디렉터리를 만들어야 합니다.

터미널 창을 열고 프로젝트에 적합한 디렉터리로 이동한 후 다음 명령을 사용하여 countdown-timer라는 디렉터리를 만듭니다.

mkdir countdown-timer

그런 다음 다음 디렉터리로 이동하세요.

cd countdown-timer

javascript-countdown 및 css-only-countdown이라는 두 개의 하위 디렉터리를 만들고 각 하위 디렉터리 내에 public이라는 하위 디렉터리를 만듭니다.

mkdir javascript-countdown && mkdir javascript-countdown/public
mkdir css-only-countdown && mkdir css-only-countdown/public

애플리케이션 서버 생성

다음으로 javascript-countdown 하위 디렉터리로 이동하여 기본 설정으로 새 노드 프로젝트를 초기화하고 Express 패키지를 설치합니다.

cd javascript-countdown
npm init -y
npm install express

즐겨 사용하는 텍스트 편집기를 열고 server.js라는 파일을 생성한 후 다음 코드를 추가하세요.

const express = require('express');
const app = express();
const port = 3001

app.use(express.static('public'));
app.listen(port, () => {
  console.log(`Javascript countdown app server started on port ${port}`);
});

위의 코드는 포트 3001에서 JavaScript 카운트다운 애플리케이션을 제공하는 데 사용될 Express 서버를 생성합니다.

HTML 구조

여전히 텍스트 편집기에서 javascript-countdown 디렉터리 내부에 있는 public 하위 디렉터리에 다음 파일을 만듭니다.

HTML 코드용 index.html
CSS 코드용 styles.css
JavaScript 코드용 index.js

index.html에 다음 코드를 추가하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Javascript Countdown Timer</title>
</head>

<body>
  <div class="container">
    <div class="controls">
      <button id="startBtn">Start</button>
      <button id="pauseBtn">Pause</button>
    </div>
    <div class="countdown-container">
      <div class="countdown"></div>
    </div>
  </div>
  <script src="index.js"></script>
</body>

</html>

이 HTML 파일은 제어 버튼이 들어 있는 컨테이너와 카운트다운 표시 영역으로 기본 구조를 설정합니다.

JavaScript를 사용하여 카운트다운 논리 구현

다음으로 카운트다운 로직을 관리하기 위해 JavaScript를 추가하겠습니다. index.js에 다음 코드를 추가하세요.

window.addEventListener("load", () => {
  const startBtn = document.getElementById('startBtn');
  const pauseBtn = document.getElementById('pauseBtn');
  const countdownView = document.getElementsByClassName('countdown')[0];

  let totalTime = 10;
  let timeLeft;
  let countDownIntervalID;
  let isPaused = false;

  pauseBtn.style.display = 'none';
});

이 코드 블록에서는 startBtn, PauseBtn 및 countdownView 요소를 해당 ID와 클래스로 초기화합니다. 또한 totalTime, timeLeft, countDownIntervalID 및 isPaused와 같은 몇 가지 초기 변수를 설정합니다. 또한 처음에는 일시정지 버튼을 숨기도록 설정했습니다.

이제 시작 및 일시 중지 버튼에 대한 이벤트 리스너를 추가해 보겠습니다.

startBtn.addEventListener('click', startOrStopTimer);
pauseBtn.addEventListener('click', pauseOrResumeTimer);

이 줄은 시작 및 일시 중지 버튼에 클릭 이벤트 리스너를 연결합니다. startOrStopTimer 및 PauseOrResumeTimer 함수는 버튼 클릭을 처리하기 위해 나중에 정의됩니다.

startOrStopTimer 함수를 정의하려면 다음 코드를 추가하세요.

function startOrStopTimer() {
  startBtn.innerHTML = startBtn.innerHTML === 'Start' ? 'Stop' : 'Start';
  if (countDownIntervalID === undefined && !isPaused) {
    timeLeft = totalTime;
    startTimer();
    pauseBtn.style.display = 'inline';
  } else {
    stopTimer();
    countdownView.innerHTML = '';
    pauseBtn.style.display = 'none';
    isPaused = false;
    pauseBtn.innerHTML = 'Pause';
  }
}

이 함수에서는 시작 버튼 텍스트를 시작과 중지 사이에서 전환합니다. 카운트다운이 실행 중이 아니고 일시 중지되지 않은 경우 timeLeft를 totalTime으로 초기화하고 타이머를 시작합니다. 그렇지 않으면 타이머를 중지하고 뷰를 재설정합니다.

이제 startTimer 함수를 정의합니다.

function startTimer() {
  countDownIntervalID = setInterval(() => {
    countdownView.innerHTML = timeLeft;

    if (timeLeft === 0) {
      stopTimer();
      startBtn.innerHTML = 'Start';
      pauseBtn.style.display = 'none';
      countdownView.innerHTML = '';
    } else {
      timeLeft = timeLeft - 1;
    }
  }, 1000);
}

이 기능은 매초마다 카운트다운을 업데이트하는 간격을 설정합니다. timeLeft가 0에 도달하면 타이머를 중지하고 시작 버튼 텍스트를 재설정하고 일시 중지 버튼을 숨깁니다.

다음으로 stopTimer 기능을 추가하세요.

function stopTimer() {
  if (countDownIntervalID !== undefined) {
    clearInterval(countDownIntervalID);
    countDownIntervalID = undefined;
  }
}

이 함수는 카운트다운 간격을 지우고 countDownIntervalID를 재설정합니다. 마지막으로 다음과 같이 PauseOrResumeTimer 함수를 추가하세요.

function pauseOrResumeTimer() {
  isPaused = !isPaused;
  pauseBtn.innerHTML = isPaused ? 'Resume' : 'Pause';

  if (countDownIntervalID !== undefined) {
    stopTimer();
  } else {
    startTimer();
  }
}

이 기능에서는 일시 중지 상태와 버튼 텍스트를 일시 중지와 재개 사이에서 전환합니다. 카운트다운이 실행 중이면 타이머를 중지합니다. 그렇지 않으면 다시 시작합니다.

CSS 스타일링

이제 CSS를 사용하여 카운트다운 타이머의 스타일을 지정해 보겠습니다. styles.css에 다음 코드를 추가하세요:

body {
  background-color: black;
  font-family: Arial, sans-serif;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.controls {
  width: 20%;
  margin-top: 10%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.countdown-container {
  position: relative;
  width: 20vw;
  height: 20vw;
  margin-top: 2%;
  border: 0.4em solid #9b51e0;
}

button {
  font-size: 1.5em;
  border: none;
  padding: 0.3em;
  background-color: #9b51e0;
  border-radius: 0.4em;
  color: white;
}

.countdown {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5em;
  color: #9b51e0;
}

이 CSS는 카운트다운 타이머 인터페이스의 스타일을 정의합니다. 본문 배경은 검정색으로 설정하고 Arial을 기본 글꼴로 사용합니다. .container 클래스는 내용을 중앙에 배치하고 요소 사이에 간격을 제공하도록 스타일이 지정되었습니다. .controls 클래스는 타이머 시작 및 일시 정지 버튼의 스타일을 지정하여 버튼의 간격이 균일하고 반응성이 있도록 합니다. .countdown-container 클래스는 테두리와 여백을 포함하여 카운트다운 표시의 크기와 모양을 정의합니다.

터미널로 돌아가서 다음 명령을 실행하여 JavaScript 카운트다운 애플리케이션 제공을 시작하세요.

node server.js

Open a new tab in your browser, navigate to http://localhost:3001, and you should see something similar to the following: How to build a countdown timer using CSS Test out the countdown timer and once you are done, terminate the server application and move to the next step.

Adding a circular progress indicator

To enhance the user experience of our countdown timer, let’s add a circular progress indicator to give the user a visual representation of the time remaining.

First, we need to modify our HTML code to include the circular progress element. In index.html, we add a span element with a class of circular-progress inside the countdown-container div. This span element will be used to create the circular progress indicator:

<div class="countdown-container">
  <span class="circular-progress"></span>
  <div class="countdown"></div>
</div>

Next, we need to define the CSS for the circular progress indicator. In styles.css, we add the following code:

.countdown-container {
  ...
  /* border : 0.4em solid #9b51e0; */
}
.circular-progress {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transition: 0.5s;
  background-color: #13171f;
}

.circular-progress::before {
  width: 18.5vw;
  height: 18.5vw;
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: black;
}

This code first removes the border from the countdown-container div, then sets the dimensions and shape of the circular progress indicator, as well as its position and background color. We also add a ::before pseudo-element to create the inner circle of the progress indicator.

Now we need to add the JavaScript code to animate the circular progress indicator.

Add the following code in the variables initialization block:

const circularProgressEl = document.getElementsByClassName("circular-progress")[0];
let circularProgress;
let circularProgressIntervalID;

This code initializes the circularProgressEl variable to target the circular progress element and creates two new variables, circularProgress and circularProgressIntervalID, that will be used to animate the progress indicator.

Add the following code below the pauseOrResumeTimer() function:

function startCircularProgressAnimation() {
  let start = totalTime - timeLeft;
  let degreesPerSecond = 360 / totalTime;
  let degreesPerInterval = degreesPerSecond / 20;
  circularProgress = degreesPerSecond * start; 

  circularProgressIntervalID = setInterval(() => {
    if (Math.round(circularProgress) === 360) {
      clearInterval(circularProgressIntervalID);
    } else {
      circularProgress = circularProgress + degreesPerInterval;
      circularProgressEl.style.background = `conic-gradient(#9b51e0 ${circularProgress}deg, #13171f 0deg)`;
    }
  }, 50);
}

This code defines the startCircularProgressAnimation function, which calculates the starting point and degree of rotation for the circular progress indicator, and sets up an interval to animate the progress indicator.

Add the following code below the startCircularProgressAnimation:

function resumeCircularProgressAnimation() {
  startCircularProgressAnimation();
}

function pauseCircularProgressAnimation() {
  clearInterval(circularProgressIntervalID);
}

function stopCircularProgressAnimation() {
  clearInterval(circularProgressIntervalID);
  circularProgressEl.style.background = `conic-gradient(#9b51e0 0deg, #13171f 0deg)`;
}

This code defines the resumeCircularProgressAnimation, pauseCircularProgressAnimation, and stopCircularProgressAnimation functions, which are used to start, pause, and stop the circular progress animation.

Finally, we need to modify the startOrStopTimer and pauseOrResumeTimer functions to start and stop the circular progress animation along with the timer:

function startOrStopTimer() {
  // ...
  if (countDownIntervalID === undefined && !isPaused) {
    // ...
    startCircularProgressAnimation();
  } else {
    // ...
    stopCircularProgressAnimation();
  }
}

function pauseOrResumeTimer() {
  // ...
  if (countDownIntervalID !== undefined) {
    stopTimer();
    pauseCircularProgressAnimation();
  } else {
    startTimer();
    resumeCircularProgressAnimation();
  }
}

With these modifications, our countdown timer now includes a circular progress indicator that animates along with the timer.

Return to your terminal and run the following command to start serving the JavaScript countdown application:

node server.js

Go back to the tab in your browser where you visited the http://localhost:3001 URL, refresh the page, and you should see something similar to the following: How to build a countdown timer using CSS

Implementing a CSS-only countdown timer

In this section, we'll dive into creating a countdown timer that updates every second and is made using only CSS. Our timer will be simple yet functional, featuring start and pause buttons to control its operation.

Creating the application server

Navigate to the css-only-countdown subdirectory, initialize a new node project, and install the express package:

cd ../css-only-countdown
npm init -y
npm install express

Then, return to your text editor, create a file named server.js, and add the following code to it:

const express = require('express');
const app = express();
const port = 3002
app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Css-only countdown app server started on port ${port}`);
});

The code above creates an express server that will be used to serve the JavaScript countdown application in port 3002.

HTML structure

Still in your text editor, create the following files in the public subdirectory:

index.html for the HTML code
styles.css for the CSS code

Add the following code to the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>CSS Countdown Timer</title>
</head>
<body>
  <div class="container">
    <div class="controls">
      <input type="checkbox" id="startBtn" class="checkbox-wrapper">
      <label for="startBtn" id="startLabel">
        <span>Stop</span>
        <span>Start</span>
      </label>
      <input type="checkbox" id="pauseBtn" class="checkbox-wrapper">
      <label for="pauseBtn" id="pauseLabel">
        <span>Resume</span>
        <span>Pause</span>
      </label>
      <div class="countdown-container">
        <ul class="countdown">
          <li>10</li>
          <li>9</li>
          <li>8</li>
          <li>7</li>
          <li>6</li>
          <li>5</li>
          <li>4</li>
          <li>3</li>
          <li>2</li>
          <li>1</li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

This code sets up the basic structure of our countdown timer. It includes a container div that holds the controls for starting and pausing the timer, as well as the countdown display itself. The controls div contains two checkboxes with labels that will serve as our start and pause buttons. These buttons toggle their respective states using CSS, thanks to the checkbox hack.

The countdown-container div holds an unordered list (ul) of list items (li) representing the countdown numbers from 10 to one. These numbers will be displayed one by one as the timer counts down.

CSS styling

Now, let's style the countdown timer using CSS. Add the following code to styles.css:

body {
  background-color: black;
  font-family: Arial, sans-serif;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.controls {
  width: 20%;
  margin-top: 10%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.countdown-container {
  position: relative;
  width: 20vw;
  height: 20vw;
  margin-top: 12%;
  border : 0.4em solid #9b51e0;
}

#startLabel span {
  display: none;
}

label {
  cursor: pointer;
  font-size: 1.5em;
  padding: 0.3em;
  background-color: #9b51e0;
  border-radius: 0.4em;
  color: white;
}

#startBtn:checked~#startLabel span:nth-child(1) {
  display: inline;
}

#startBtn:not(:checked)~#startLabel span:nth-child(2) {
  display: inline;
}

#startBtn:not(:checked)~#pauseLabel,
#pauseBtn {
  display: none;
}

#pauseLabel span {
  display: none;
}

#pauseBtn:checked~#pauseLabel span:nth-child(1) {
  display: inline;
}

#pauseBtn:not(:checked)~#pauseLabel span:nth-child(2) {
  display: inline;
}

.checkbox-wrapper {
  display: none;
}

In this CSS file, we start by setting some basic styles for the body and container. The body has a black background and uses the Arial font. The container is centered using flexbox and has a margin to push it down from the top of the viewport.

The controls div is styled to be responsive and to ensure that the buttons are spaced out evenly. The countdown-container div is styled with a border, which will later be replaced by the circular progress indicator.

We use the checkbox hack to toggle the visibility of the labels for the start and pause buttons. Depending on whether the checkboxes are checked or not, different spans within the labels are displayed. This allows the labels to show different text (Start or Stop, Pause or Resume) based on the state of the checkboxes.

Now, add the following code to the bottom of the styles.css file:

.countdown {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5em;
  color: #9b51e0;
}

.countdown li {
  position: absolute;
  opacity: 0;
  transition: opacity 1s linear;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(1) {
  animation-delay: 0s;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(2) {
  animation-delay: 1s;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(3) {
  animation-delay: 2s;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(4) {
  animation-delay: 3s;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(5) {
  animation-delay: 4s;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(6) {
  animation-delay: 5s;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(7) {
  animation-delay: 6s;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(8) {
  animation-delay: 7s;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(9) {
  animation-delay: 8s;
}

#startBtn:checked~.countdown-container .countdown li:nth-child(10) {
  animation-delay: 9s;
}

@keyframes countdownAnimation {
  0%,
  10% {
    opacity: 1;
  }
  11%,
  100% {
    opacity: 0;
  }
}

#startBtn:checked~.countdown-container .countdown li {
  animation: countdownAnimation 10s steps(10) forwards;
}

#pauseBtn:checked~.countdown-container .countdown li {
  animation-play-state: paused;
}

With this code, we style the countdown list. The countdown class is positioned absolutely within the countdown-container, and its list items are initially hidden with opacity: 0.

We then use keyframes and the animation property to create the countdown effect. The list items are displayed one by one with a delay using the animation-delay property. The countdownAnimation keyframes control the visibility of each list item, making them visible for a short period before hiding them again.

We also pause the animation when the pause button is checked, using the animation-play-state property.

Go back to your terminal and run the following command to start serving the CSS-only countdown application:

node server.js

Open a new tab in your browser, navigate to http://localhost:3002 URL, and you should see something similar to the following: How to build a countdown timer using CSS Test out the countdown timer and once you are done, terminate the server application and move to the next step.

Adding a circular progress indicator

To make the countdown timer more visually appealing, we can add a circular progress indicator that shows the remaining time. To do this, we will modify the HTML and CSS code as follows:

First, replace the countdown-container div in the index.html file with the following code:

<div class="countdown-container">
  <span class="circular-progress">
  </span>
  <ul class="countdown">
    <li>10</li>
    <li>9</li>
    <li>8</li>
    <li>7</li>
    <li>6</li>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
  </ul>
</div>

In this code, we add a span element with a class of circular-progress inside the countdown-container div.

Next, add the following code to the styles.css file:

.countdown-container {
  ...
  /* border : 0.4em solid #9b51e0; */
}

.circular-progress {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transition: 0.5s;
  background: conic-gradient(#9b51e0 var(--angle), #13171f 0deg);
}

.circular-progress::before {
  width: 18.5vw;
  height: 18.5vw;
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: black;
}

@keyframes circularProgressAnimation {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

#startBtn:checked~.countdown-container .circular-progress {
  opacity: 1;
  animation: circularProgressAnimation 10s linear;
}

#pauseBtn:checked~.countdown-container .circular-progress {
  animation-play-state: paused;
}

In this code, we first remove the border from the countdown-container div, and then add styles for the circular-progress class. The circular progress indicator is a span element that is absolutely positioned within the countdown-container. It uses a conic gradient to create the circular progress effect.

We also define a keyframe animation, circularProgressAnimation, that animates the progress indicator from 0 to 360 degrees over the duration of the countdown. The --angle CSS property is used to control the angle of the gradient.

Finally, we use the checkbox hack to start and pause the circular progress animation along with the countdown numbers. The animation is applied to the circular-progress span when the start button is checked and paused when the pause button is checked.

With these modifications, our countdown timer now includes a circular progress indicator that animates along with the timer.

Go back to your terminal and run the following command to start serving the CSS-only countdown application:

node server.js

Return to the tab in your browser where you visited the http://localhost:3002 URL, refresh the page, and you should see something similar to the following: How to build a countdown timer using CSS

Using Chrome DevTools to compare timer performance

Now that we have implemented both the CSS-only and JavaScript countdown timers, let's compare their performance using Chrome DevTools.

To get started, open the Chrome browser and navigate to the webpage containing the countdown timers. Right-click anywhere on the page and select Inspect to open Chrome DevTools.

In the DevTools window, click on the Network tab and then refresh both the JavaScript and CSS-only countdown pages. This tab allows you to monitor all network requests made by the page, including HTML, CSS, JavaScript, and other resources: How to build a countdown timer using CSS

By analyzing the requests, you can determine how many resources are being loaded, their sizes, and the overall impact on page load time:

	CSS-only countdown timer	JavaScript countdown timer
Number of requests	2	3
Total size	4.5 KB	4.7 KB
Page load	24 ms	27 ms

これらの結果から、CSS のみのカウントダウンタイマーは、JavaScript カウントダウンタイマーと比較して必要なリクエストが少なく、合計サイズがわずかに小さいことがわかります。これにより、CSS のみのバージョンのページ読み込み時間がわずかに速くなり、初期読み込みの点でより効率的になります。

DevTools ウィンドウで、パフォーマンス タブに移動し、記録ボタンをクリックして記録セッションを開始します。 JavaScript カウントダウンタイマーを評価するには、それぞれのページにある Start ボタンをクリックし、タイマーがコースを実行できるようにします。タイマーが停止したら、パフォーマンス タブで録音を停止します。

JS と CSS のみのカウントダウンページの両方に対してこのプロセスを実行して、各実装のパフォーマンスデータを収集します。 パフォーマンス タブでは、スクリプト、レンダリング、ペイント時間を含む、ページの実行時のパフォーマンスの包括的な分析が提供されます。これらのメトリクスを分析することで、Web アプリケーションのパフォーマンスを向上させるために最適化が必要な領域を特定できます。

	CSS-only countdown timer	JavaScript countdown timer
Scripting	2 ms	49 ms
Rendering	510 ms	103 ms
Painting	275 ms	55 ms

CSS のみのカウントダウンタイマー JavaScript カウントダウンタイマースクリプト 2 ミリ秒 49 ミリ秒レンダリング 510 ミリ秒 103 ミリ秒絵画 275 ミリ秒 55 ミリ秒テーブル>

これらの結果を解釈すると、CSS のみのカウントダウンタイマーのスクリプト時間は JavaScript カウントダウンタイマーよりも大幅に短く、実行オーバーヘッドが最小限であることがわかります。ただし、CSS のみのカウントダウンタイマーでは、レンダリングとペイントに時間がかかります。これは、CSS アニメーションのレンダリングには、特に複雑なスタイルやトランジションの場合、ブラウザーにより多くの労力が必要になる場合があるためです。

対照的に、JavaScript カウントダウンタイマーでは、カウントダウンの更新に含まれるロジックによりスクリプト時間が長くなりますが、レンダリングとペイントの時間が短縮されるという利点があります。これは、JavaScript はスクリプトの実行に関してオーバーヘッドを追加しますが、DOM の更新と変更のレンダリングに関してはより効率的である可能性があることを示唆しています。

全体的に、スクリプトの実行時間を最小限に抑えることが重要なシナリオでは、CSS のみのカウントダウンタイマーの方が効率的ですが、レンダリングとペイントの時間が最も重要な場合には、JavaScript タイマーの方がパフォーマンスが向上する可能性があります。

それぞれのアプローチの長所と短所

CSS のみのカウントダウンタイマーと JavaScript のカウントダウンタイマーの両方を調べたので、それぞれの長所と短所を比較検討して、どちらのアプローチがニーズに最も適しているかを判断してみましょう。

CSS のみのカウントダウンタイマー

CSS のみのカウントダウンタイマーは、純粋な CSS を活用してカウントダウン効果を実現し、軽量で簡単なソリューションを提供します。

その利点は次のとおりです:

最小限のスクリプトオーバーヘッド: パフォーマンス分析でわかるように、CSS 専用タイマーではスクリプトの実行がほとんど必要ないため、スクリプト実行の CPU 使用率が低くなります。これは、特に処理能力が限られたデバイスで、ページ全体のパフォーマンスを向上させるのに有益です
簡素化されたコードベース: アニメーションに CSS を利用することで、コードがよりクリーンで保守しやすくなります。このアプローチにより、実装の複雑さが軽減され、開発者がコードを理解し、管理しやすくなります

このアプローチの短所は次のとおりです。

レンダリング時間とペイント時間の増加: CSS のみのタイマーでは、レンダリング時間とペイント時間が長くなる傾向があります。これは CSS アニメーションの性質によるもので、ブラウザのレンダリングエンジンに対する要求が高くなる可能性があります。これは、複数のアニメーションや複雑なレイアウトを含むページのパフォーマンスに影響を与える可能性があります
制限された対話性: CSS アニメーションは本質的に JavaScript よりも柔軟性が低くなります。動的更新や条件付きロジックなど、よりインタラクティブな機能を実装するのは困難な場合があり、追加の JavaScript が必要になる場合があり、シンプルさの利点が部分的に無効になります

JavaScript カウントダウンタイマー

一方、JavaScript カウントダウンタイマーは、JavaScript を使用してカウントダウンロジックと DOM 更新を管理します。このアプローチにより、より優れた制御と柔軟性が提供されます。

このアプローチの長所は次のとおりです。

強化された制御と柔軟性: JavaScript は、カウントダウンロジックと DOM 操作をきめ細かく制御できます。これにより、より複雑なインタラクション、条件付き動作、動的な更新が可能になり、より洗練されたアプリケーションに適したものになります
効率的なレンダリングとペイント: パフォーマンス分析が示すように、JavaScript タイマーはレンダリングとペイントにかかる時間が短縮されるという利点があります。 JavaScript は DOM の更新を最適化できるため、頻繁な更新を伴うシナリオでアニメーションがよりスムーズになり、パフォーマンスが向上します

短所は次のとおりです:

スクリプトのオーバーヘッドが高い: JavaScript カウントダウンタイマーの主な欠点は、スクリプト時間が増加することです。 JavaScript ロジックにより追加の CPU オーバーヘッドが発生し、特に処理能力の低いデバイスやスクリプトの使用量が多いページではパフォーマンスに影響を与える可能性があります
複雑さの増加: JavaScript カウントダウンタイマーの実装には、より多くのコードの作成と管理が必要となり、プロジェクトの複雑さが増す可能性があります。この複雑さが増すと、コードベースの保守とデバッグが難しくなる可能性があります

CSS のみのタイマーは軽量で理解しやすいため、スクリプトを最小限に抑えたシンプルなカウントダウンに適しています。ただし、より複雑なアニメーションやインタラクティブな機能では問題が発生する可能性があります。一方、JavaScript タイマーはより優れた制御と柔軟性を提供し、より動的な対話を可能にします。これには、スクリプトのオーバーヘッドが増加し、複雑さが増します。

最終的に、2 つのアプローチのどちらを選択するかは、プロジェクトの具体的なニーズと、受け入れられるトレードオフによって決まります。

結論

このチュートリアルでは、カウントダウンタイマーを作成するための 2 つの方法 (JavaScript を使用する方法と CSS のみを使用する方法) を検討しました。基本的な JavaScript カウントダウンタイマーから始めて、機能とスタイルを追加して、使いやすく視覚的に魅力的なものにしました。次に、CSS のみのカウントダウンタイマーを実装し、シンプルでありながら効果的なアニメーションを作成するための CSS の力を示しました。

シンプルさのために CSS のみのアプローチを選択するか、柔軟性のために JavaScript アプローチを選択するかに関係なく、プロジェクトのニーズに合ったカウントダウンタイマーを実装するためのツールと知識が得られます。

フロントエンドがユーザーの CPU を占有していませんか?

Web フロントエンドがますます複雑になるにつれて、リソースを貪欲な機能がブラウザーに要求します。本番環境のすべてのユーザーのクライアント側の CPU 使用率、メモリ使用量などを監視および追跡することに興味がある場合は、LogRocket を試してください。

How to build a countdown timer using CSS

LogRocket は Web アプリやモバイルアプリ用の DVR のようなもので、Web アプリ、モバイルアプリ、または Web サイトで発生するすべてを記録します。問題が発生する理由を推測する代わりに、主要なフロントエンドパフォーマンスメトリクスを集計してレポートし、アプリケーションの状態とともにユーザーセッションを再生し、ネットワークリクエストをログに記録し、すべてのエラーを自動的に明らかにすることができます。

Web アプリとモバイルアプリのデバッグ方法を最新化します。無料でモニタリングを始めましょう。

위 내용은 CSS를 사용하여 카운트다운 타이머를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：장고 테일윈드다음 기사：장고 테일윈드

CSS를 사용하여 카운트다운 타이머를 만드는 방법

기본 JavaScript 카운트다운 타이머 만들기

디렉터리 구조 만들기

애플리케이션 서버 생성

HTML 구조

JavaScript를 사용하여 카운트다운 논리 구현

CSS 스타일링

Adding a circular progress indicator

Implementing a CSS-only countdown timer

Creating the application server

HTML structure

CSS styling

Adding a circular progress indicator

Using Chrome DevTools to compare timer performance

それぞれのアプローチの長所と短所

CSS のみのカウントダウン タイマー

JavaScript カウントダウン タイマー

結論

フロントエンドがユーザーの CPU を占有していませんか?

관련 기사

CSS のみのカウントダウンタイマー

JavaScript カウントダウンタイマー