HTML CSS js를 사용한 프로세스 흐름
- DDD원래의
- 2024-10-08 22:19:31983검색
암호
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Process Flow</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background-color: #121212; /* Dark background */
margin: 0;
color: #ffffff; /* White text for better visibility */
font-family: Arial, sans-serif;
}
.process-container {
display: flex;
align-items: center;
position: relative;
width: 100%;
max-width: 800px;
}
.phase {
flex: 1;
text-align: center;
position: relative;
z-index: 1;
}
.phase-line {
position: absolute;
top: 50%;
left:40%;
width: 130%;
height: 4px; /* Line thickness */
background-color: #ccc; /* Light gray line */
z-index: 0;
}
.phase-line.active {
background-color: #007bff; /* Active blue line */
}
.phase-circle {
width: 30px;
height: 30px;
background-color: #fff; /* Default white circle */
border-radius: 50%;
display: inline-block;
transition: background-color 0.3s;
z-index: 1;
line-height: 30px; /* Center the number vertically */
font-weight: bold; /* Make the number bold */
color: #000; /* Black text for better visibility */
}
.phase-circle.active {
background-color: #007bff; /* Active blue circle */
color: #fff; /* White text when active */
}
button {
padding: 10px 20px;
font-size: 1.2rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
p{
font-weight: 400;
font-size: smaller;
}
</style>
</head>
<body>
<div class="process-container">
<div class="phase">
<div class="phase-circle active" id="phase1">1</div>
<div class="phase-line active" id="line1"></div>
<p>About You</p>
</div>
<div class="phase">
<div class="phase-circle" id="phase2">2</div>
<div class="phase-line" id="line2"></div>
<p>About Book</p>
</div>
<div class="phase">
<div class="phase-circle" id="phase3">3</div>
<div class="phase-line" id="line3"></div>
<p>Review</p>
</div>
<div class="phase">
<div class="phase-circle" id="phase4">4</div>
<div class="phase-line" id="line4"></div>
<p>Buy</p>
</div>
<div class="phase">
<div class="phase-circle" id="phase5">5</div>
<p>Finish</p>
</div>
</div>
<div>
<button id="prevButton">Previous</button>
<button id="nextButton">Next</button>
</div>
<script>
let currentPhase = 1;
const updatePhase = () => {
for (let i = 1; i <= 5; i++) {
const phaseCircle = document.getElementById(`phase${i}`);
const phaseLine = document.getElementById(`line${i}`);
if (i < currentPhase) {
phaseCircle.classList.add('active');
if (phaseLine) phaseLine.classList.add('active');
} else if (i === currentPhase) {
phaseCircle.classList.add('active');
if (phaseLine) phaseLine.classList.add('active');
} else {
phaseCircle.classList.remove('active');
if (phaseLine) phaseLine.classList.remove('active');
}
}
};
document.getElementById('nextButton').addEventListener('click', () => {
if (currentPhase < 5) {
currentPhase++;
updatePhase();
}
});
document.getElementById('prevButton').addEventListener('click', () => {
if (currentPhase > 1) {
currentPhase--;
updatePhase();
}
});
updatePhase(); // Initialize the phase display
</script>
</body>
</html>
위 내용은 HTML CSS js를 사용한 프로세스 흐름의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.