Najprostszy możliwy minutnik JavaScript? [Zamknięte]

240

Chciałem tylko zapytać, jak stworzyć najprostszy możliwy minutnik.

Na stronie pojawi się zdanie:

„Rejestracja kończy się za 05:00 minut!”

Tak więc chcę stworzyć prosty licznik czasu js, który zmienia się z „05:00” na „00:00”, a po zakończeniu resetuje się do „05:00”.

Wcześniej przeglądałem kilka odpowiedzi, ale wszystkie wydają się zbyt intensywne (obiekty Date itp.) Na to, co chcę zrobić.

javascript timer countdown countdowntimer Bartek
źródło
4
I znowu pomijasz odpowiedni HTML, chociaż tym razem przynajmniej wyjaśniłeś problem złożoności. Ale poważnie, musisz samemu znaleźć rozwiązanie , a następnie przyjdź i zapytaj nas o problemy, które masz.
David mówi, że przywrócenie Moniki
Koduj przykłady ze skargami na ich zbyt skomplikowane? W każdym razie, myślę, że można łatwo setIntervali sprawić, że będzie oparty na .innerHTML, zamiast na podstawie daty.
bjb568,
1
Tak, ludzie powinni sami szukać rozwiązania. Ale w javaScript jest wiele przykładów wykonywania typowych zadań. Wiem, jak zrobić minutnik, ale wolę, jeśli znajdę go w sieci (jak komponent). Dzięki temu pytaniu i obszernej odpowiedzi znalazłem to, czego szukałem. Logika odliczania
Carlos Rafael Ramirez
2
Uznałem, że te rozwiązania są prostsze: stackoverflow.com/questions/32141035/…
nw everest
Spójrz na to: sitepoint.com/build-javascript-countdown-timer-no-dependencies
Erich García

Odpowiedzi:

490

Mam dwa dema, jeden z, jQuerya drugi bez. Żadna z funkcji daty nie jest tak prosta, jak to tylko możliwe.

Demo z waniliowym JavaScript

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};
<body>
    <div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>
Rozwiń fragment kodu

Demo z jQuery 

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

jQuery(function ($) {
    var fiveMinutes = 60 * 5,
        display = $('#time');
    startTimer(fiveMinutes, display);
});

Jeśli jednak potrzebujesz dokładniejszego timera, który jest tylko nieco bardziej skomplikowany:

function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;
    function timer() {
        // get the number of seconds that have elapsed since 
        // startTimer() was called
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // does the same job as parseInt truncates the float
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds; 

        if (diff <= 0) {
            // add one second so that the count down starts at the full duration
            // example 05:00 not 04:59
            start = Date.now() + 1000;
        }
    };
    // we don't want to wait a full second before the timer starts
    timer();
    setInterval(timer, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};
<body>
    <div>Registration closes in <span id="time"></span> minutes!</div>
</body>
Rozwiń fragment kodu

Teraz, gdy stworzyliśmy kilka dość prostych timerów, możemy zacząć myśleć o ponownym użyciu i rozwiązywaniu problemów. Możemy to zrobić, pytając „co powinien zrobić odliczający czas?”

  • Czy licznik czasu powinien odliczać? tak
  • Czy odliczający czas powinien wiedzieć, jak wyświetlać się w DOM? Nie
  • Czy odliczający czas powinien wiedzieć, aby zrestartować się, gdy osiągnie zero? Nie
  • Czy licznik czasu powinien umożliwiać klientowi dostęp do pozostałego czasu? tak

Mając to na uwadze, napiszmy lepsze (ale nadal bardzo proste) CountDownTimer

function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};

Dlaczego więc ta implementacja jest lepsza od innych? Oto kilka przykładów tego, co możesz z tym zrobić. Zauważ, że funkcje oprócz pierwszego przykładu nie mogą zostać osiągnięte startTimer.

Przykład, który wyświetla czas w formacie XX: XX i uruchamia się ponownie po osiągnięciu 00:00

Przykład, który wyświetla czas w dwóch różnych formatach

Przykład, który ma dwa różne liczniki i tylko jeden uruchamia się ponownie

Przykład, który rozpoczyna odliczanie czasu po naciśnięciu przycisku

robbmj
źródło
2
Jesteś mężczyzną! Właśnie tego szukałem. Dziękuję Ci! Jeszcze jedno: jak dodać „0” przed minutami, aby wyświetlał „04:59” zamiast „4:59”?
Bartek
1
minutes = minutes < 10 ? "0" + minutes : minutes;
robbmj
8
@timbram też początkowo wydawało mi się to dziwne, dopóki nie zdałem sobie sprawy, że przecinek po vardeklaracji rozdziela różne deklaracje. więc minutesi secondssą po prostu zadeklarowanymi (ale niezainicjowanymi) zmiennymi. więc timerjest po prostu równy durationparametrowi, nic więcej, nic mniej.
abustamam
2
@ SinanErdem Napisałem kod, który to robi. Mogę dodać ten kod do odpowiedzi później dzisiaj. Kiedy to zrobię, wyślemy ci ping.
robbmj
3
Jak dodać opcje resetowania? A także pauza i wznowienie? Próbowałem dodać pole this.reset i sprawdzić to w zamknięciu. Ale zegar wciąż mija.
Dzung Nguyen,
24

Jeśli chcesz mieć prawdziwy zegar, musisz użyć obiektu daty.

Oblicz różnicę.

Sformatuj swój ciąg.

window.onload=function(){
      var start=Date.now(),r=document.getElementById('r');
      (function f(){
      var diff=Date.now()-start,ns=(((3e5-diff)/1e3)>>0),m=(ns/60)>>0,s=ns-m*60;
      r.textContent="Registration closes in "+m+':'+((''+s).length>1?'':'0')+s;
      if(diff>3e5){
         start=Date.now()
      }
      setTimeout(f,1e3);
      })();
}

Przykład

Jsfiddle

nie tak dokładny zegar

var time=5*60,r=document.getElementById('r'),tmp=time;

setInterval(function(){
    var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
    r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s
    tmp!=0||(tmp=time);
},1000);

JsFiddle

cocco
źródło
16

Możesz łatwo stworzyć funkcjonalność timera za pomocą setInterval. Poniżej znajduje się kod, za pomocą którego możesz go utworzyć.

http://jsfiddle.net/ayyadurai/GXzhZ/1/

window.onload = function() {
  var minute = 5;
  var sec = 60;
  setInterval(function() {
    document.getElementById("timer").innerHTML = minute + " : " + sec;
    sec--;
    if (sec == 00) {
      minute --;
      sec = 60;
      if (minute == 0) {
        minute = 5;
      }
    }
  }, 1000);
}
Registration closes in <span id="timer">05:00<span> minutes!
Rozwiń fragment kodu

Durai
źródło
3
Nie odwzorowuje dokładnie każdej sekundy, odlicza o wiele za szybko.
Scott Rowley,
4
Zmiana 500 na 1000 wydaje się być dokładna.
Scott Rowley,
Sprytne rozwiązanie, godzinę należy zmienić na minutę, aby uniknąć zamieszania
embulldogs99