Timer on jquery


  • QA Engineer

    Help me get this code on jquery.

      function startTimer() {
    var my_timer = document.getElementById("my_timer");
    var time = my_timer.innerHTML;
    var arr = time.split(":");
    var h = arr[0];
    var m = arr[1];
    var s = arr[2];
    if (s == 0) {
      if (m == 0) {
    if (h == 0) {
      alert("Время вышло");
      window.location.reload();
      return;
    }
    h--;
    m = 60;
    if (h < 10) h = "0" + h;
      }
      m--;
      if (m < 10) m = "0" + m;
      s = 59;
    }
    else s--;
    if (s < 10) s = "0" + s;
    document.getElementById("my_timer").innerHTML = h+":"+m+":"+s;
    setTimeout(startTimer, 1000);
      }



  • My old decision is jQuery:

    function timer() {
      time_rest = ((time_rest < 0) ? 0: time_rest - 1);
    

    var hours = Math.floor(time_rest / 3600);
    var minutes = Math.floor((time_rest - (hours * 3600)) / 60);
    var seconds = Math.floor((time_rest - ((hours * 3600) + (minutes * 60))));

    if(hours < 10) {
    hours = "0" + hours;
    }

    if(minutes < 10) {
    minutes = "0" + minutes;
    }

    if(seconds < 10) {
    seconds = "0" + seconds;
    }

    $(".hours").html(hours);
    $(".minutes").html(minutes);
    $(".seconds").html(seconds);

    if(time_rest == 0) {
    //location.reload(); // обновляем страницу, если время вышло (скрыл для теста)
    }
    }

    var time_now = new Date().getTime() / 1000; // текущее время в формате timestamp
    var time_to = new Date("21 June 2016 22:33:44").getTime() / 1000; // финальное время в формате timestamp

    var time_rest = Math.floor(time_to - time_now); // сколько осталось секунд до финального времени в формату timestamp

    // делим на 1000, т.к. ответит приходит в миллисекундах

    timer();

    setInterval(function() {
    timer();
    }, 1000);

      .timer {
    width: 300px;
    text-align: center;
    color: #98001A;
    font-size: 30px;
    font-family: Arial;
    }

    .timer .title {
    font-size: 15px;
    color: #000;
    }

    .timer .hours, .timer .minutes, .timer .seconds {
    display: inline;
    padding: 1.6px;
    }

    .timer .colon {
    display: inline;
    }

    <script src="//code.jquery.com/jquery.min.js"></script>

    <div class="timer">
    <div class="title">До конца акции осталось:</div>

    <div class="hours">00</div>

    <div class="colon">:</div>

    <div class="minutes">00</div>

    <div class="colon">:</div>

    <div class="seconds">00</div>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2