понедельник, 4 июля 2011 г.

JavaScript. Таймер или динамичный последний отсчёт

А теперь другой вариант последнего отсчёта. На этот раз самый настоящий, динамичный.

<div id="datecounter2">--:--:--</div>

<script type="text/javascript">

onload = function start() {
  timesp();
}

function timesp() {
  var ts = new Date(2012,11,21) - new Date();
  var html = "уже наступил!";
  if (ts>0) {
    var h = ts/3600000;
    var m = (h-Math.floor(h))*60;
    var s = (m-Math.floor(m))*60;
    html = ctime(h)+" : "+ctime(m)+" : "+ctime(s);
    t = setTimeout("timesp()",300);
  } else {
    clearTimeout(t);
  }
  document.getElementById("datecounter2").innerHTML=html;
}

function ctime(i) {
  i = Math.floor(i);
  if (i<10) {
    i = "0"+i;
  }
  return i;
}

</script>

После загрузки страницы отрабатывает функция start(), которая запускает функцию timesp(). А timesp() уже при помощи команды setTimeout('timesp()',300) будет запускать сама себя через каждые 300 милисекунд. Функция ctime(i) округляет передаваемый аргумент и, если его значение меньше 10, добавляет "0". Это нужно для того, чтобы вместо "1:2:3" было "01:02:03", как в настоящих электронных таймерах.

Пример работы скрипта:

До Нового года:

--:--:--

А, собственно, само время, оставшееся до следующего Нового года, посчиталось так:

var d = new Date();
var ts = new Date(d.getFullYear() + 1,0,1) - d;

Го вверх!