JavaScript Fortschritt Text-Farbverlauf programmieren

CyborgBeta · Sonntag um 17:44

Sonntagsfrage. 😬

Wie kann ich hier einen Farbverlauf in den Text "Weiterleitung in ..." (insg. 44 Zeichen (inkl. Leerzeichen usw.)) programmieren, die den Fortschritt/Progress des Weiterleitungsvorgangs optisch hervorhebt?

Wenn zum Beispiel 1/4 erreicht ist, soll es so aussehen:

Nur, dass der Text eben nicht markiert werden soll, sondern zum Beispiel grau. Also, wenn man so will, eine Progress-Bar, die hinter dem Text läuft.

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="icon" href="favicon.png" type="image/png" />
    <style>
      body {
        font-family: Verdana, sans-serif;
      }
    </style>
  </head>

  <body>
    <header></header>
    <main>
      <p>Hier geht es zum <a href="url">Forum/Discourse</a> weiter.</p>
      <p>Weiterleitung in: <span id="dsecs"></span> Sekunden. (<a href="#" onclick="halt();">Anhalten.</a>)</p>
    </main>
    <footer></footer>
    <script>
      let halted = false;
      let totalMillis = 1000 * 10;
      let t1 = new Date();
      t1.setMilliseconds(t1.getMilliseconds() + totalMillis);
      let iv = setInterval(function () {
        let t2 = new Date();
        document.getElementById("dsecs").innerHTML = Number((t1 - t2) / 1000).toFixed(1);
        if (t2 >= t1) {
          clearInterval(iv);
          if (!halted) {
            window.location.href = "url";
          }
        }
      }, 100);

      function halt() {
        halted = true;
        clearInterval(iv);
      }
    </script>
  </body>
</html>

Piktogramm · Sonntag um 17:55

An sich gibt es nur zwei Möglichkeiten. Entweder ist das eine Hausaufgabe, die solltest du selber machen. Wenn es eine Produktivumgebung ist, dann sorg dafür, dass die Weiterleitung funktioniert ohne künstliche Verzögerung.

Und für den @TE, dessen Bedienung einer Suchmaschine eher unterwältigend zu sein scheint: https://www.w3schools.com/howto/howto_js_progressbar.asp

PS: Ich möchte zudem meine Abneigung gegen Inline script zum Ausdruck bringen!

CyborgBeta · Sonntag um 17:56

Piktogramm schrieb:
dann sorg dafür, dass die Weiterleitung funktioniert ohne künstliche Verzögerung.

Bitte solche Phrasen auch kurz begründen ...

madmax2010 · Sonntag um 18:01

künstliche Verzögerungen sind nervig und nicht notwendig. Niemand freut sich, wenn die Weiterleitung mit einem Countdown startet.
Websites die so etwas machen verlasse ich

Piktogramm · Sonntag um 18:02

Die Begründung:
Welche Daseinsberechtigung hat Funktionalität die einzig und allein Verzögerung bewirkt?

Normalerweise ist das Ziel nach 2..5s nach einem Klick auf einen Link das Rendering der Webseite soweit fertig zu haben, dass es kein Contentshift mehr gibt. Du baust Funktionalität ein, die künstlich 10s Verzögerung bewirkt und die 10s nichtmal Anstalten macht Preloading zu betreiben.

CyborgBeta · Sonntag um 18:05

Also, weder sind das Hausaufgaben, noch enthält der Link eine Antwort auf meine Frage. Nutzlose Antwort. 😬

Ergänzung (Sonntag um 18:07)

Piktogramm schrieb:
Du baust Funktionalität ein, die künstlich 10s Verzögerung bewirkt und die 10s nichtmal Anstalten macht Preloading zu betreiben.

Ja, weil der Nutzer entscheiden können soll, ob er weiter möchte oder nicht.

madmax2010 · Sonntag um 18:09

?
Ich habe schon oft versucht dir in threads zu helfen und dabei auch schon mehrfach deine Frage erst falsch / zu trivial verstanden (sorry), aber wenn ich eine js Progressbar brauche nehme ich immer die seite, die @Piktogramm verlinkt hat.
Da ist doch fast alles beschrieben was du oben an Anforderungen hast.

Javascript:

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #04AA6D;
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

<script>
function getColor(percent) {
  // Generate a hue value (0 = red, 120 = green)
  const hue = percent * 1.2; // 0 to 120
  return `hsl(${hue}, 100%, 40%)`;
}

function move() {
  let elem = document.getElementById("myBar");
  let width = 10;
  let id = setInterval(frame, 100);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + "%";
      elem.innerHTML = width + "%";
      elem.style.backgroundColor = getColor(width);
    }
  }
}

// Start the progress animation
move();
</script>

</body>
</html>

Farbverlauf halt grob so
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_label
da kannst du testen

CyborgBeta · Sonntag um 18:11

@madmax2010 Das färbt den kompletten Text ein.

madmax2010 · Sonntag um 18:13

Das ist eine prograssbar die mit Fortschritt durch einen Farbverlauf geht. Der text ist dauerhaft in der bar zentriert und aendert seine Farbe nicht.
In dem Beispiel ist er weiss

CyborgBeta schrieb:
Progress-Bar, die hinter dem Text läuft.

Das ist doch dein Ziel?

CyborgBeta · Sonntag um 18:15

madmax2010 schrieb:
Das ist doch dein Ziel?

Ja, eine Art Inline-Progress-Bar.

andy_m4 · Sonntag um 18:17

CyborgBeta schrieb:
Ja, weil der Nutzer entscheiden können soll, ob er weiter möchte oder nicht.

Trotzdem kann man die Wartezeit ja nutzen und sozusagen spekulativ preloaden.
btw.: Wenns um eine Entscheidung geht, dann will man eigentlich kein Zeitdruck haben, sondern darüber ggf. nachdenken können.
Und dann machts doch eher Sinn eben zwei Links anzubieten?

Aber so wie es oben dargestellt ist, ists doch die beschissenstmögliche Implementierung.
Entweder ist man gezwungen zu warten bis es weiter geht, oder man hat den Stressfaktor sich schnell entscheiden zu müssen, ob man nicht doch abbricht.

CyborgBeta · Sonntag um 18:33

Habe eine Möglichkeit gefunden:

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="icon" href="favicon.png" type="image/png" />
    <style>
      body {
        font-family: Verdana, sans-serif;
      }

      .barouter {
        border: solid grey thick;
        width: 100%;
      }

      .barinner {
        height: 20px;
        background: yellow;
        width: 0px;

        -transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
      }
    </style>
  </head>

  <body>
    <header></header>
    <main>
      <p>Hier geht es zum <a href=" ">Forum/Discourse</a> weiter.</p>
      <div class="barouter">
        <div class="barinner">Weiterleitung in: <span id="dsecs"></span> Sekunden. (<a href="#" onclick="halt();">Anhalten.</a>)</div>
      </div>
    </main>
    <footer></footer>
    <script>
      // this gets the style sheets loaded in the dom as an array
      let sheets = document.styleSheets;

      //this gets the rules in the form of an array from the first sheet
      let rules = sheets[0].cssRules || sheets[0].rules;

      let halted = false;
      let totalMillis = 1000 * 10;
      let t1 = new Date();
      t1.setMilliseconds(t1.getMilliseconds() + totalMillis);
      let iv = setInterval(function () {
        let t2 = new Date();
        document.getElementById("dsecs").innerHTML = Number((t1 - t2) / 1000).toFixed(1);
        rules[2].style.width = parseInt((1 - (t1 - t2) / totalMillis) * 100) + "%";
        if (t2 >= t1) {
          clearInterval(iv);
          if (!halted) {
            window.location.href = " ";
          }
        }
      }, 100);

      function halt() {
        halted = true;
        clearInterval(iv);
      }
    </script>
  </body>
</html>

Jetzt ist die Progress bar / die Hinweisbox nur etwas zu lang ...

Siehe auch hier https://stackoverflow.com/questions...e-in-size-by-increasing-the-width-but-without

andy_m4 schrieb:
Aber so wie es oben dargestellt ist, ists doch die beschissenstmögliche Implementierung.
Entweder ist man gezwungen zu warten bis es weiter geht, oder man hat den Stressfaktor sich schnell entscheiden zu müssen, ob man nicht doch abbricht.

Magst recht haben. Aber dann wäre doch gar kein Countdown besser ... nur ein Link.

madmax2010 · Sonntag um 18:36

Aber das ist doch im was ich dir gegeben habe?, nur ohne den Farbverlauf und der Text ist jetzt linksbündig und schwarz.

andy_m4 · Sonntag um 18:37

CyborgBeta schrieb:
Aber dann wäre doch gar kein Countdown besser ... nur ein Link.

Eben.
Ich wollte Dein Problem dadurch lösen, das ich Deinen Ansatz kaputt mache und 'ne Alternative vorschlage . :-)

CyborgBeta · Sonntag um 19:07

Bekomme es leider nicht hin, dass der Text die barinner width ignoriert, also dass er nicht durch das innere Div begrenzt wird ...

CyborgBeta · Sonntag um 20:11

Ok, es gibt zwar schöneres, aber es funktioniert jetzt!

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="icon" href="favicon.png" type="image/png" />
    <style>
      body {
        font-family: Verdana, sans-serif;
      }

      #bar1 {
        border: solid gray thick;
      }

      #bar2 {
        height: 20px;
        background: lightseagreen;
        width: 0px;

        transition: all 0.1s linear;
      }

      #bar3 {
        position: absolute;
      }
    </style>
  </head>

  <body>
    <header></header>
    <main>
      <p>Hier geht es zum <a href="url1">Forum/Discourse</a> weiter.</p>
      <div id="bar1">
        <div id="bar2">
          <div id="bar3">&nbsp;Weiterleitung in: <span id="dsecs"></span> Sekunden. (<a href="#" onclick="halt();">Anhalten.</a>)&nbsp;</div>
        </div>
      </div>
    </main>
    <footer></footer>
    <script>
      let halted = false;
      let totalMillis = 1000 * 10;
      let t1 = new Date();
      t1.setMilliseconds(t1.getMilliseconds() + totalMillis);
      let iv = setInterval(function () {
        let t2 = new Date();
        document.getElementById("dsecs").innerHTML = Number((t1 - t2) / 1000).toFixed(1);
        document.getElementById("bar1").style.width = window.getComputedStyle(document.getElementById("bar3")).width;
        document.getElementById("bar2").style.width = parseInt((1 - (t1 - t2) / totalMillis) * 100) + "%";
        if (t2 >= t1) {
          clearInterval(iv);
          if (!halted) {
            window.location.href = "url1";
          }
        }
      }, 100);

      function halt() {
        halted = true;
        clearInterval(iv);
      }
    </script>
  </body>
</html>

andy_m4 · Sonntag um 20:36

CyborgBeta schrieb:
aber es funktioniert jetzt!

Ist doch 'ne akzeptable und zugleich auch einfache Lösung.

CyborgBeta · Sonntag um 21:01

Ja, es sieht nur nicht ganz so dolle aus ...

Ich überlege noch, ob nur ein einfacher Link nicht doch besser wäre.

Btw., wie geht das Preloading? Der Seitenaufbau dauert ca. 250 ms ... im Vergleich zu den 10 s ist das ja fast nix.

CyborgBeta · Montag um 06:36

Jetzt sieht es schön aus.

Das grün sieht besser aus und es ist nun auch mittig:

HTML:

    <style>
      body {
        font-family: Verdana, sans-serif;
      }

      #bar1 {
        border: solid gray 2px;
      }

      #bar2 {
        background: greenyellow;
        width: 0px;
        height: 30px;

        transition: all 0.1s linear;
      }

      #bar3 {
        position: absolute;
        margin-inline: 24px;
        height: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>


  <body>
    <header></header>
    <main>
      <p>Hier geht es zum <a href="https://.../">Forum/Discourse</a> weiter.</p>
      <div id="bar1">
        <div id="bar2">
          <div id="bar3">Weiterleitung in:&nbsp;<span id="dsecs">10.0</span>&nbsp;Sekunden. (<a href="#" onclick="halt();">Anhalten.</a>)</div>
        </div>
      </div>
    </main>
    <footer></footer>
    <script>
      let halted = false;
      let totalMillis = 1000 * 10;
      let t1 = new Date();
      t1.setMilliseconds(t1.getMilliseconds() + totalMillis);
      let iv = setInterval(function () {
        let t2 = new Date();
        document.getElementById("dsecs").innerHTML = Number((t1 - t2) / 1000).toFixed(1);
        // document.getElementById("bar1").style.width = window.getComputedStyle(document.getElementById("bar3")).width;
        document.getElementById("bar1").style.width = document.getElementById("bar3").clientWidth + 2 * 26 + "px";
        document.getElementById("bar2").style.width = parseInt((1 - (t1 - t2) / totalMillis) * 100) + "%";
        if (t2 >= t1) {
          clearInterval(iv);
          if (!halted) {
            window.location.href = "https://.../";
          }
        }
      }, 100);

      function halt() {
        halted = true;
        clearInterval(iv);
      }
    </script>
  </body>

Border jeweils: 2px
margin links und rechts: 24px

Dann muss ich zur berechneten Breite noch (2 x 26) px hinzurechnen.

Auf einen Farbverlauf, von rot nach grün, habe ich verzichtet, wäre aber auch möglich, wie @madmax2010 es angedeutet hat.

floq0r · Montag um 09:01

Auch eine Idee:

https://www.coding-dude.com/wp/css/gradient-text/

JavaScript Fortschritt Text-Farbverlauf programmieren

Captain

Admiral

Captain

Fleet Admiral

Admiral

Captain

Fleet Admiral

Captain

Fleet Admiral

Captain

Admiral

Captain

Fleet Admiral

Admiral

Captain

Captain

Admiral

Captain

Captain

Captain

Ähnliche Themen