suchen

Heim >Web-Frontend >js-Tutorial >Prozessablauf mit HTML, CSS, JS

Prozessablauf mit HTML, CSS, JS

DDD
DDDOriginal
2024-10-08 22:19:311031Durchsuche

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>

Das obige ist der detaillierte Inhalt vonProzessablauf mit HTML, CSS, JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html using JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Best Practices für JavaScript: Sauberen und effizienten Code schreibenNächster Artikel：Best Practices für JavaScript: Sauberen und effizienten Code schreiben

In Verbindung stehende Artikel

Mehr sehen