Показать сообщение отдельно
  #1 (permalink)  
Старый 01.08.2015, 17:41
Новичок на форуме
Отправить личное сообщение для AlexSoul Посмотреть профиль Найти все сообщения от AlexSoul
 
Регистрация: 26.07.2015
Сообщений: 8

Многострочный таймер
Здравствуйте. Требуется сделать несколько таймеров на странице идущих параллельно. Но при добавлении последующих таймеров время сбрасывается и идет отсчет не того времени, а как у первого таймера

<span id="AJ" style="color: #f00; font-size: 120%; font-weight: bold;">01:01:00</span>
<input type="button" value="Запуск" onClick=startTimer("AJ",1) >
<input type="button" value="Сбросить" onClick=startTimer("AJ",3) >

<span id="AL" style="color: #f00; font-size: 120%; font-weight: bold;">02:00:00</span>
<input type="button" value="Запуск" onClick=startTimer("AL",1) >
<input type="button" value="Сбросить" onClick=startTimer("AL",3) >

<span id="AV" style="color: #f00; font-size: 120%; font-weight: bold;">02:05:00</span>
<input type="button" value="Запуск" onClick=startTimer("AV",1) >
<input type="button" value="Сбросить" onClick=startTimer("AV",3) >

<script type="text/javascript">
(function() {
 
function getElem_Time(outElem) {
     var arr = outElem.innerHTML.split(':')
     return 1000*(3600*(+arr[0])+60*(+arr[1])+(+arr[2]));
}
 
function two_dig (t) {
     return  (parseInt(t)/100).toFixed(2).toString().split('.')[1];
}
 
function getHH_MM_SS(sek) {
     return two_dig (sek/3600)+  ':' + two_dig ((sek/60)%60)+ ':' + two_dig (sek%60);
}
 
var timerId;        // ID setInterval
var firstSaveVal;   // Тут сохраняем начальное значение Time из элемента;
var  endDate     =  localStorage.endDate;
 
 
startTimer = function(sel,test){    //test == 1 при запуске по кнопке и == 0 при автозапуске на новой странице, 3 - сброс;
 
  var outElem = document.getElementById(sel); //объект вывода/ввода цифр
  clearInterval(timerId);
 
  if(!firstSaveVal)firstSaveVal = outElem.innerHTML;
 
  if(test == 2) {delete localStorage.endDate; return}
 
  if(test == 3) {outElem.innerHTML = firstSaveVal; delete localStorage.endDate; return}
 
  if(!endDate &&!test) return false; //Aвтозапуск на новой странице;
 
  var deltaT = getElem_Time(outElem);
 
  if(test){
     outElem.innerHTML = firstSaveVal;
     deltaT = getElem_Time(outElem);
     delete localStorage.endDate;
     endDate = localStorage.endDate;
  }
 
  var thisTime = +new Date();
 
  if(!endDate){
    var timeEnd = thisTime + deltaT;
    localStorage.endDate = sel+','+ timeEnd;
  }
 
  if(endDate &&!test){
     var arr = endDate.split(',');
     var outElem = document.getElementById(arr[0]);
     var timeEnd = +arr[1];
  }
 
 
  function setOutTime(){
    if(+new Date()>=timeEnd){
       alert("Время вышло");
       clearInterval(timerId);
       outElem.innerHTML='00:00:00';
       delete localStorage.endDate;
       return;
    }
    var timeToFinish = parseInt((timeEnd - +new Date())/1000);
    outElem.innerHTML = getHH_MM_SS(timeToFinish);
 }  setOutTime();
   
 
  timerId = setInterval(setOutTime,1000);
 
 
}
 
  startTimer("AJ",0);
  window.onfocus =   function (){startTimer("AJ",0); } 

  startTimer("AL",0); 
  window.onfocus =   function (){startTimer("AL",0); } 

  startTimer("AV",0); 
  window.onfocus =   function (){startTimer("AV",0); } 
   
}());
</script>


подскажите пожалуйста как переделать код так, чтобы можно было запускать несколько таймеров...в джаваскрипт не силён поэтому прошу строго не судить
Ответить с цитированием