실시간 통계를 표시하는 JavaScript 예제를 제공해 드리겠습니다. 이 예제에서는 HTML과 JavaScript를 사용하여 실시간으로 통계를 업데이트하는 방법을 보여줍니다.
HTML 파일 생성:
HTML 파일을 생성하고 실시간 통계를 표시할 영역을 마련합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실시간 통계</title>
</head>
<body>
<h1>실시간 통계</h1>
<p>현재 사용자 수: <span id="userCount">0</span></p>
<p>현재 주문 수: <span id="orderCount">0</span></p>
<script src="script.js"></script>
</body>
</html>
JavaScript 파일 생성:
JavaScript 파일(script.js)을 생성하고 아래의 코드를 추가합니다.
// script.js
const userCountElement = document.getElementById('userCount');
const orderCountElement = document.getElementById('orderCount');
let userCount = 0;
let orderCount = 0;
// 일정 간격으로 통계 업데이트
setInterval(updateStatistics, 1000);
function updateStatistics() {
// 임의의 방법으로 사용자 수와 주문 수 업데이트
userCount = getRandomNumber(100, 500);
orderCount = getRandomNumber(50, 200);
// 업데이트된 통계를 화면에 표시
userCountElement.textContent = userCount;
orderCountElement.textContent = orderCount;
}
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
결과 확인:
웹 브라우저에서 HTML 파일을 열어서 실시간 통계가 업데이트되는 것을 확인합니다.
'HTML 예제' 카테고리의 다른 글
| 파티클 시뮬레이션: HTML5 <canvas>를 사용하여 파티클 시뮬레이션 만들기 (1) | 2023.12.06 |
|---|---|
| 사진 슬라이드 쇼: JavaScript로 사진 슬라이드 쇼 만들기 (1) | 2023.12.06 |
| 도넛 차트: JavaScript와 HTML5 <canvas>로 도넛 차트 생성 (0) | 2023.12.06 |
| 반응형 테이블: CSS 미디어 쿼리를 사용하여 반응형 테이블 디자인 (0) | 2023.12.06 |
| 동적 그래프: JavaScript와 HTML5 <canvas>로 동적 그래프 생성 (0) | 2023.12.06 |
