728x90
자바스크립트로 프로그레스바 만들기 로딩바 만들기
아래는 소스 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>프로그레스 바</title>
<style>
.progress-bar {
margin: 10px auto;
width: 50%;
background-color: #ccc;
padding: 10px;
box-sizing: border-box;
}
.progress {
height: 30px;
margin-bottom: 10px;
background-color: #007BFF;
color: white;
text-align: center;
line-height: 30px;
transition: width 0.5s;
white-space:nowrap;
}
#increment-button {
margin: auto;
display: block;
padding: 10px 20%;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s;
}
#increment-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<div class="progress-bar">
<div class="progress" id="dog-progress">강아지: 0%</div>
<div class="progress" id="cat-progress">고양이: 0%</div>
<div class="progress" id="squirrel-progress">다람쥐: 0%</div>
</div>
<button id="increment-button">증가</button>
</div>
<script>
// 초기 백분율 값
const initialDogPercentage = 19;
const initialCatPercentage = 78;
const initialSquirrelPercentage = 3;
// 현재 백분율 값
let dogPercentage = 0;
let catPercentage = 0;
let squirrelPercentage = 0;
// 프로그레스 바 업데이트 함수
function updateProgressBar(id, percentage) {
const progressBar = document.getElementById(id);
progressBar.style.width = percentage + '%';
progressBar.textContent = id.charAt(0).toUpperCase() + id.slice(1) + ': ' + percentage + '%';
}
// 초기화
updateProgressBar('dog-progress', dogPercentage);
updateProgressBar('cat-progress', catPercentage);
updateProgressBar('squirrel-progress', squirrelPercentage);
// 버튼 클릭 시 백분율 초기값으로 증가
const incrementButton = document.getElementById('increment-button');
incrementButton.addEventListener('click', function () {
if (dogPercentage < 1) {
dogPercentage = initialDogPercentage;
updateProgressBar('dog-progress', dogPercentage);
catPercentage = initialCatPercentage;
updateProgressBar('cat-progress', catPercentage);
squirrelPercentage = initialSquirrelPercentage;
updateProgressBar('squirrel-progress', squirrelPercentage);
} else {
dogPercentage = 0;
catPercentage = 0;
squirrelPercentage = 0;
updateProgressBar('dog-progress', dogPercentage);
updateProgressBar('cat-progress', catPercentage);
updateProgressBar('squirrel-progress', squirrelPercentage);
}
});
</script>
</body>
</html>728x90
'javascript' 카테고리의 다른 글
| 자바스크립트로 정규 표현식 (Regular expression) 테스트 (1) | 2023.10.03 |
|---|---|
| 자바스크립트(javascript) 클래스(Class) 알아보기 (0) | 2023.10.01 |
| 자바스크립트(Javascript) 변수 기본 (1) | 2023.10.01 |
| 자바스크립트로 파일 드래그 앤 드롭 업로드 방법 (0) | 2023.09.02 |
| 티스토리에서 자바스크립트로 클립보드 복사 만들기 (0) | 2022.10.25 |
