Process Flow using html css js-JS Tutorial-php.cn

Process Flow using html css js

DDD

Release： 2024-10-08 22:19:31

Original

882 people have browsed it

Process Flow using html css js

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>

Copy after login

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!