js, um einen interessanten Countdown-Effekt zu erzielen

js interessanter Countdown-Fall. Zu Ihrer Information ist der spezifische Inhalt wie folgt

Code:

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <Stil>
    * {
      Rand: 0;
      Polsterung: 0;
    }
    
    .wickeln {
      Überlauf: versteckt;
      Breite: 500px;
      Höhe: 500px;
      Hintergrundfarbe: #eeeeee;
      Rand: 0 automatisch;
    }
    
    h2 {
      Rand oben: 20px;
      Textausrichtung: zentriert;
      Farbe: #fff;
    }
    
    Eingabe {
      Breite: 70px;
    }
    
    .ipt {
      Textausrichtung: zentriert;
      Rand oben: 50px;
    }
    
    .laufen {
      Breite: 100px;
      Höhe: 100px;
      Hintergrundfarbe: #000;
      Textausrichtung: zentriert;
      Zeilenhöhe: 100px;
      Farbe: #fff;
      Schriftgröße: 30px;
      Randradius: 50 %;
      Rand: 30px auto 0;
    }
    
    .juli {
      Textausrichtung: zentriert;
      Rand oben: 30px;
    }
    
    .sytime {
      Textausrichtung: zentriert;
      Rand oben: 60px;
      Schriftgröße: 25px;
      Farbe: #fff;
    }
    
    .sytime Spanne {
      Schriftgröße: 30px;
      Farbe: rot;
    }
    
    .juli span {
      Schriftgröße: 18px;
      Farbe: rot;
    }
  </Stil>
</Kopf>
 
<Text>
  <div Klasse="wrap">
    <h2>Countdown</h2>
    <!-- Formular -->
    <div Klasse="ipt">
      Bitte geben Sie ein: <input type="text">Jahr<input type="text">Monat<input type="text">Tag</div>
    <!-- Start-Schaltfläche-->
    <div class="run">Starten</div>
    <!-- Entfernung Zeit -->
    <p class="juli">Jetzt beträgt die Entfernung zu -<span class="julitime">0000</span>-:</p>
    <!-- Verbleibende Zeit -->
    <div Klasse="sytime">
      <span>00</span>Tage<span>00</span>Stunden<span>00</span>Minuten<span>00</span>Sekunden</div>
  </div>
  <Skript>
    // Elemente abrufen // Formular var ipt = document.getElementsByTagName('input');
    //Schaltfläche var btn = document.getElementsByClassName('run')[0];
    // Entfernung Jahr var julitime = document.getElementsByClassName('julitime')[0];
    // Countdown var sytime = document.getElementsByClassName('sytime')[0];
    var Zeit = sytime.getElementsByTagName('span');
    console.log(ipt, btn, julitime, Zeit);
 
    var timerId = null;
    // Klickereignis btn.onclick = function() {
      wenn (ipt[1].Wert > 12 || ipt[2].Wert > 30) {
        alert('Der Monat muss kleiner als 12 und der Tag kleiner als 30 sein');
        zurückkehren;
      } sonst wenn (ipt[0].value.trim() == '' || ipt[1].value.trim() == '' || ipt[2].value.trim() == '') {
        alert('Inhalt darf nicht leer sein');
        zurückkehren;
      }
      TimerId = setzeInterval(AnzahlZeit, 1000);
 
    }
 
 
 
    Funktion Zählzeit() {
      // Eingabejahr abrufen var ipty = ipt[0].value;
      // Eingabemonat abrufen var iptm = ipt[1].value;
      // Holen Sie sich das Eingabedatum var iptd = ipt[2].value;
      // konsole.log(ipty, iptm, iptd);
      var str = ipty + '-' + iptm + '-' + iptd;
      // konsole.log(str);
      // Der Distanzzeit einen Wert zuweisen julitime.innerHTML = str;
      // Aktuelle Distanz 1970, 1,1 Millisekunden var nowDate = +new Date();
      // Eingabezeitabstand 1970,1,1 Millisekunden var inputFr = +new Date(ipty + '-' + iptm + '-' + iptd)
        // Subtrahieren Sie die Anzahl der Sekunden ab jetzt in der Zukunft. var times = (inputFr - nowDate) / 1000;
      var d = parseInt(Zeiten / 60 / 60 / 24) //Tage d = d < 10 ? '0' + d : d;
      var h = parseInt(times / 60 / 60 % 24) // wenn h = h < 10? '0' + h : h;
 
      var m = parseInt(times / 60 % 60); // Punkte m = m < 10 ? '0' + m : m;
 
      var s = parseInt(times % 60); //Sekunden s = s < 10 ? '0' + s : s;
 
      // konsole.log(d, h, m, s);
      Zeit[0].innerHTML = d;
      Zeit[1].innerHTML = h;
      Zeit[2].innerHTML = m;
      Zeit[3].innerHTML = s;
    }
  </Skript>
</body>
 
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS-Countdown-Implementierungscode (Stunden, Minuten, Sekunden)
JS-Countdown (Tage, Stunden, Minuten, Sekunden)
Einfacher und leicht zu verwendender Countdown-JS-Code
js-Code zur Realisierung des 60-Sekunden-Countdowns beim Klicken auf die Schaltfläche
2 einfache JS-Countdown-Methoden
Beispiel für die Implementierung einer einfachen Countdown-Funktion mit nativem JS
js Countdown-Sprungbeispiel nach ein paar Sekunden
Ein guter JS-HTML-Seiten-Countdown kann auf Sekunden genau sein
js realisiert den Countdown-Effekt des Klickens, um den Bestätigungscode zu erhalten
Javascript implementiert den Countdown für Produkt-Blitzverkäufe (Zeit wird mit der Serverzeit synchronisiert)

<<: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 (Ubuntu 16.04)

>>: Einfaches MySQL-Beispiel zum Sortieren chinesischer Schriftzeichen nach Pinyin