Home >Web Front-end >JS Tutorial >Process Flow using html css js

Process Flow using html css js

DDDOriginal: 2024-10-08 22:19:311030browse

CODE

<!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>

The above is the detailed content of Process Flow using html css js. For more information, please follow other related articles on the PHP Chinese website!

css html using JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript Best Practices: Writing Clean and Efficient CodeNext article：JavaScript Best Practices: Writing Clean and Efficient Code

See more

Process Flow using html css js

CODE

Related articles