Maison >interface Web >js tutoriel >Flux de processus utilisant HTML CSS JS

Flux de processus utilisant HTML CSS JS

DDDoriginal: 2024-10-08 22:19:311031parcourir

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html using JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Meilleures pratiques JavaScript : rédiger du code propre et efficaceArticle suivant：Meilleures pratiques JavaScript : rédiger du code propre et efficace

Articles Liés

Voir plus