ホームページ > 記事 > ウェブフロントエンド > html css jsを使った処理の流れ
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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。