Wie kann ich einen countdown-timer mit html?

Helfe ich meinem I. T Lehrer zu schaffen, die Ostereier für einige Aufgaben, und ich würde gerne einen countdown mit html.
Erklärung:
Jedesmal, wenn Sie in einer website, der countdown-timer beginnt.
Beispiel:
Ich habe einen html-code mit einem countdown-timer auf 30 min, wenn ich gehe in die website, der countdown beginnt runter zu gehen, aber wenn ich aktualisieren Sie die website, es zurücksetzen.
Ich hoffe, Sie verstehen, danke!

  • Was haben Sie bisher ausprobiert? Ich denke, Sie wollen verwenden Sie einige javascript-Code als auch.
  • Sie müssen das Programm eine browser-Erweiterung, injiziert Sie Ihren javascript-Code in jede Seite, die der Benutzer besucht, um zu erreichen, dass. Außerdem erwarten Sie hier aber keine Menschen, um code für Sie. zeigen einige Mühe
  • Erstellen Sie ein cookie auf dem anfänglichen laden und zu aktualisieren, der Wert der Zähler beim schließen/laufen. Überprüfen Sie die Cookies auf die Seite geladen und dann fortsetzen mit dem Wert aus dem cookie.
  • Verwenden auslaufenden JWT kehrte jeder Anfrage.
InformationsquelleAutor GGarriga | 2016-10-04
  1. 0

    Wenn Sie möchten, verwenden Sie nur javascript, die ohne einen server-Seite Sprache, die Sie speichern könnte die Zeit, die bleibt in der localStorage-variable, weil, nachdem Sie verlassen Sie die website/browser wird die gleiche bleiben;

    Beispiel:

    function countdown() {
    time = parseInt(localStorage.time); //All variables in localstorage are strings
    //Resets timer if cannot parse the localStorage.time variable or if the time is greater than 30 mins
    if(isNaN(time) || time > (30*60)) {
        alert("An error occured: time left variable is corrupted, resetting timer");
        localStorage.time = 30*60; //30 mins in seconds
        countdown();
        return null;    
    }
    //Decrementing time and recalling the function in 1 second
    time--;
    localStorage.time = time;
    setTimeout('countdown()', 1000);
}

    Können Sie eine Funktion hinzufügen, die wiederum Sekunden: Minuten:Sekunden, und Bearbeiten Sie die Funktion, so wird es ändern ein element jedesmal, wenn er fordert es selbst, oder etwas tun, wenn die Zeit 0 erreicht(vergessen Sie nicht, rufen Sie es einmal, es sei denn, der timer wird nicht ausgeführt). Viel Glück!

    Machte ich einen Stift für Sie:
    http://codepen.io/DaCurse0/pen/kkxVYP

    Sollte es haben, alles, was Sie brauchen.

    P. S: sollten Sie wahrscheinlich entfernen Sie den Alarm bei der Prüfung, ob der timer beschädigt ist, denn es wird sich zeigen, wenn der timer nicht eingestellt.

    InformationsquelleAutor
  2. 0

    html-code:

    <h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="text">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="text">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="text">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="text">Seconds</div>
  </div>
</div>

    css-code:

    #clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}

#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}

.text{
    padding-top: 5px;
    font-size: 16px;
}

    javascript-code:

    function getTimeRemaining(endtime) {
  var t = Date.parse("June 31,2017") - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

    in der html-documnet,die neuen Dateien:

    <script type="text/javascript" src="assets/js/count.js"></script>

<link rel="stylesheet" type="text/css" href="assets/css/flipclock.css">

    hoffe, es funktioniert...

    InformationsquelleAutor Joish
Schreibe einen Kommentar