froops
@froops

Как сделать обратный счетчик времени между двумя датами UNIX?

Люди добрые! Ну или злые побудьте добрыми минут 20...
Помогите, пожалуйста, я в JS - полный круглый нолик, причем даже запятой после нолика нет.
Есть две даты в формате UNIX, которые берутся из БД, мне нужно найти сколько между этими датами осталось времени и вывести это на страницу.

Пример 1: (Между датой 1 и датой 2 разница в 60сек - это 1 минута)
- Сперва: До события осталось
- Потом должен пойти обратный отсчет: 59с, 58с, 57с ... 0с

Пример 2: ((Между датой 1 и датой 2 разница в 5400сек - это 1ч 30м)
- Сперва: До события осталось 1ч 30м (30м должны уменьшать в реальном времени)
- Потом, когда прошло 30 минут: До события осталось: 1ч 59с (59с должны уменьшать в реальном времени)
- Потом, когда прошли 59с: До события осталось: 59м 59с (59с в реальном времени уменьшается)

В общем, вот точно такой же счетчик нужен:
websiteprog.ru/javascript_tajmer_obratnogo_otscheta

Но только под две даты UNIX-времени и чтобы лишние нули скрывались, ну и без всяких всплывающих окон...
Помогите, кому не сложно! Буду очень благодарен!

P.S Никаких библиотек и остального подключать нельзя, только голый JS нужен...
  • Вопрос задан
  • 923 просмотра
Пригласить эксперта
Ответы на вопрос 1
timer.js
var int1 = parseInt(document.getElementById("int1").innerHTML);
    var int2 = parseInt(document.getElementById("int2").innerHTML);

    document.getElementById('timer_inp2').innerHTML = int1 - int2;
function timer() {
  var obj=document.getElementById('timer_inp2'); 
  obj.innerHTML--;  
  
  if(obj.innerHTML > 0) {
    
    // Если больше дня
    if(obj.innerHTML >= (24*60*60)) {
      
      var d = Math.floor(obj.innerHTML / (24*60*60));
      var h = Math.floor(obj.innerHTML % (24*60*60));
      
      if(h >= 3600) {
        var h = Math.floor(h / 3600);
      }
      else if(h >= 60) {
        var m = Math.floor(h / 60);
        var h = 0;
      }
      else {
        var s = h;
        var h = 0;
        var m = 0;
      }
    }
    // Если больше часа
    else if(obj.innerHTML >= 3600) {
      
      var h = Math.floor(obj.innerHTML / 3600);
      var m = Math.floor(obj.innerHTML % 3600);
      
      if(m >= 60) {
        var m = Math.floor(m / 60);
      }
      else {
        var s = m;
        var m = 0;
      }
      
    }
    // Если больше минуты
    else if(obj.innerHTML >= 60) {
      var m = Math.floor(obj.innerHTML / 60);
      var s = Math.floor(obj.innerHTML % 60);
    }
    // Если меньше минуты
    else {
      var s = obj.innerHTML;
    }
    
    //var d = Math.floor(obj.innerHTML / (365 *24*60*60));
    var days = (d > 0) ? d+'дн ' : '';
    var hours = (h > 0) ? h+'ч ' : '';
    var minutes = (m > 0) ? m+'м ' : '';
    var seconds = (s > 0) ? s+'с ' : '';
    
    document.getElementById('new_time').innerHTML = '<div>осталось: '+days+hours+minutes+seconds+'</div>';
    setTimeout(timer,1000);
  }
}
setTimeout(timer,1000);


index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
<body>
  <div style="display:none" id="int1" class="green">300</div><!--Дата окончания-->
  <div style="display:none" id="int2" class="green">200</div><!--Дата начала-->
  <div id="timer_inp2" class="green"></div>
  <div id="new_time"></div>
  <script type="text/javascript" src="timer.js"></script><!--Обязательно в конце-->
  </body>
</html>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы