Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Помогите с информационым таймером (https://javascript.ru/forum/css-html/67783-pomogite-s-informacionym-tajjmerom.html)

Александр2233 07.03.2017 22:54

Помогите с информационым таймером
 
Нужен скрипт сколько до конца урока, до конца перемены, чтобы он работал каждый день, циклично, я в java не силен, но что то получилось написать, и уже возникли проблемы, как то по другому нужно писать, пока не пойму как, прошу помощи у гуру спецов.. за ранее благодарен!!! Моё убожество работает, но если раскоментить последние строчки все ломается, да и так мне кажется, все достаточно проще должно быть, а то так нагружает сильно))
<p id="timer"></p>

<script>
var outTimer = document.getElementById('timer'),
	dateEnd = (new Date()).setHours(7, 30, 0); // ввод значения до начала занятий
    dateEnd2 = (new Date()).setHours(8, 30, 0); // ввод значения до начала 1 урока
    dateEnd3 = (new Date()).setHours(9, 15, 0); // ввод значения до конца 1 урока
    dateEnd4 = (new Date()).setHours(9, 30, 0); // перемена, начало 1 урока
    dateEnd5 = (new Date()).setHours(10, 15, 0); // ввод значения до конца 2 урока
    dateEnd6 = (new Date()).setHours(10, 35, 0); // перемена, начало 2 урока
    dateEnd7 = (new Date()).setHours(11, 20, 0); // ввод значения до конца 3 урока
    dateEnd8 = (new Date()).setHours(11, 40, 0); // перемена, начало 3 урока
    dateEnd9 = (new Date()).setHours(12, 25, 0); // ввод значения до конца 4 урока
    dateEnd10 = (new Date()).setHours(12, 40, 0); // перемена, начало 4 урока
    dateEnd11 = (new Date()).setHours(13, 25, 0); // ввод значения до конца 5 урока
    dateEnd12 = (new Date()).setHours(13, 40, 0); // перемена, начало 5 урока
    dateEnd13 = (new Date()).setHours(14, 25, 0); // ввод значения до конца 6 урока
    dateEnd14 = (new Date()).setHours(14, 35, 0); // перемена, начало 6 урока
    dateEnd15 = (new Date()).setHours(15, 20, 0); // ввод значения до конца 7 урока
    dateEnd16 = (new Date()).setHours(15, 30, 0); // перемена, начало 7 урока
    dateEnd17 = (new Date()).setHours(16, 15, 0); // ввод значения до конца 8 урока
    
setInterval(function () {
  var diff = Math.round((dateEnd - new Date()) / 1000), // разница
      diff2 = Math.round((dateEnd2 - new Date()) / 1000), // разница 
      diff3 = Math.round((dateEnd3 - new Date()) / 1000), // разница
      diff4 = Math.round((dateEnd4 - new Date()) / 1000), // разница 
      diff5 = Math.round((dateEnd5 - new Date()) / 1000), // разница 
      diff6 = Math.round((dateEnd6 - new Date()) / 1000), // разница 
      diff7 = Math.round((dateEnd7 - new Date()) / 1000), // разница 
      diff8 = Math.round((dateEnd8 - new Date()) / 1000), // разница 
      diff9 = Math.round((dateEnd9 - new Date()) / 1000), // разница 
      diff10 = Math.round((dateEnd10 - new Date()) / 1000), // разница 
      diff11 = Math.round((dateEnd11 - new Date()) / 1000), // разница 
      diff12 = Math.round((dateEnd12 - new Date()) / 1000), // разница 
      diff13 = Math.round((dateEnd13 - new Date()) / 1000), // разница 
      diff14 = Math.round((dateEnd14 - new Date()) / 1000), // разница 
      diff15 = Math.round((dateEnd15 - new Date()) / 1000), // разница 
      diff16 = Math.round((dateEnd16 - new Date()) / 1000), // разница 
      diff17 = Math.round((dateEnd17 - new Date()) / 1000), // разница  
	  text = '';
  
  if (diff > 0) {
    
	text = 'До начала уроков ' + Math.floor(diff / 3600) + ' час. '+ Math.floor(diff / 60) % 60 + ' мин.' +  Math.floor(diff / 60*60) % 60 + ' сек.';
    
  } else {
    if (diff2 > 0){
        text = 'До начала 1 урока ' + Math.floor(diff2 / 60) % 60 + ' мин.' +  Math.floor(diff2 / 60*60) % 60 + ' сек.';
    }
    if (diff2 < 0 && diff3 > 0){
        text = 'До конца 1 урока ' + Math.floor(diff3 / 60) % 60 + ' мин.' +  Math.floor(diff3 / 60*60) % 60 + ' сек.';
    }
   if (diff2 < 0 && diff3 < 0 && diff4 > 0){
        text = 'Перемена ' + Math.floor(diff4 / 60) % 60 + ' мин.' +  Math.floor(diff4 / 60*60) % 60 + ' сек.';
    }
    if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 > 0){
        text = 'До конца 2 урока ' + Math.floor(diff5 / 60) % 60 + ' мин.' +  Math.floor(diff5 / 60*60) % 60 + ' сек.';
    }
    if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 > 0){
        text = 'Перемена ' + Math.floor(diff6 / 60) % 60 + ' мин.' +  Math.floor(diff6 / 60*60) % 60 + ' сек.';
    }
    if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 < 0 && diff7 > 0){
        text = 'До конца 3 урока ' + Math.floor(diff7 / 60) % 60 + ' мин.' +  Math.floor(diff7 / 60*60) % 60 + ' сек.';
    }
    if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 < 0 && diff7 < 0 && diff8 > 0){
        text = 'Перемена ' + Math.floor(diff8 / 60) % 60 + ' мин.' +  Math.floor(diff8 / 60*60) % 60 + ' сек.';
    }
    if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 < 0 && diff7 < 0 && diff8 < 0 && diff9 > 0){
        text = 'До конца 4 урока ' + Math.floor(diff9 / 60) % 60 + ' мин.' +  Math.floor(diff9 / 60*60) % 60 + ' сек.';
    }
     if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 < 0 && diff7 < 0 && diff8 < 0 && diff9 < 0 && diff10 > 0){
        text = 'Перемена ' + Math.floor(diff10 / 60) % 60 + ' мин.' +  Math.floor(diff10 / 60*60) % 60 + ' сек.';
    }
     if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 < 0 && diff7 < 0 && diff8 < 0 && diff9 < 0 && diff10 < 0 && diff11 > 0){
        text = 'До конца 5 урока ' + Math.floor(diff11 / 60) % 60 + ' мин.' +  Math.floor(diff11 / 60*60) % 60 + ' сек.';
    }
    if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 < 0 && diff7 < 0 && diff8 < 0 && diff9 < 0 && diff10 < 0 && diff11 < 0 && diff12 > 0){
        text = 'До конца 6 урока ' + Math.floor(diff12 / 60) % 60 + ' мин.' +  Math.floor(diff12 / 60*60) % 60 + ' сек.';
    }
    // if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 < 0 && diff7 < 0 && diff8 < 0 && diff9 < 0 && diff10 < 0 && diff11 < 0 && diff12 < 0 && diff13 > 0){
   //     text = 'Перемена ' + Math.floor(diff13 / 60) % 60 + ' мин.' +  Math.floor(diff13 / 60*60) % 60 + ' сек.';
    //}
  //  if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 < 0 && diff7 < 0 && diff8 < 0 && diff9 < 0 && diff10 < 0 && diff11 < 0 && diff12 < 0 && diff13 < 0 && diff 14 > 0){
    //    text = 'Перемена ' + Math.floor(diff14 / 60) % 60 + ' мин.' +  Math.floor(diff14 / 60*60) % 60 + ' сек.';
    //}
  ///  if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 > 0 && diff7 < 0 && diff8 < 0 && diff9 < 0 && diff10 < 0 && diff11 < 0 && diff12 < 0 && diff13 < 0 && diff 14 < 0 && diff15 > 0){
  //      text = 'До конца 7 урока ' + Math.floor(diff15 / 60) % 60 + ' мин.' +  Math.floor(diff15 / 60*60) % 60 + ' сек.';
  //  }
   // if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 > 0 && diff7 < 0 && diff8 < 0 && diff9 < 0 && diff10 < 0 && diff11 < 0 && diff12 < 0 && diff13 < 0 && diff 14 < 0 && diff15 < 0 && diff16 > 0){
  //      text = 'Перемена ' + Math.floor(diff16 / 60) % 60 + ' мин.' +  Math.floor(diff16 / 60*60) % 60 + ' сек.';
  //  }
   // if (diff2 < 0 && diff3 < 0 && diff4 < 0 && diff5 < 0 && diff6 > 0 && diff7 < 0 && diff8 < 0 && diff9 < 0 && diff10 < 0 && diff11 < 0 && diff12 < 0 && diff13 < 0 && diff 14 < 0 && diff15 < 0 && diff16 < 0 && diff 17 > 0){
  //      text = 'До конца 8 урока ' + Math.floor(diff16 / 60) % 60 + ' мин.' +  Math.floor(diff16 / 60*60) % 60 + ' сек.';
  //  }
       
  }
  
  outTimer.innerHTML = text;
  
}, 1000);
</script>

рони 08.03.2017 00:25

Расписание школьных звонков
 
Александр2233,

массив в 21 строке заполните по возрастанию,при этом первый и последний элемент массива должны быть одинаковые. смотрите пример ниже.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
  <title></title>
</head>
<body><div id = 'show'></div>
<script>
function two(a) {
    return (9 < a ? "" : "0") + a
}
function formatTime(a) {
    a = Math.floor(a / 1E3);
    var c = Math.floor(a / 60),
        d = Math.floor(c / 60);
    a %= 60;
    c %= 60;
    return two(d) + " : " + two(c) + " : " + two(a)
}
function Time() {
    var a = new Date, c = [
    {t : "До начала занятий", h : 7, m : 30},
    {t : "До начала 1 урока", h : 8, m : 30},
    {t : "До конца 1 урока", h : 9, m : 15},
    {t : "До начала занятий", h : 7, m : 30}],
    d = [], e = a.getDate() + 1, b = 0;
    for (; b < c.length; b++)
    a.setHours(c[b].h, c[b].m, 0, 0),
    c.length-1 == b && a.setDate(e),
    d[b] = a.getTime();
    for (b = 0; b < c.length && !(a = d[b] - (new Date).getTime(), 0 < a); b++);
    document.getElementById("show").innerHTML = c[b].t + " в " +c[b].h +":"+c[b].m+ " осталось " + formatTime(a);
    window.setTimeout(Time, 1E3)
};
Time()

</script>
</body>
</html>

Александр2233 09.03.2017 11:16

Огромное спасибо))

Александр2233 09.03.2017 12:24

нашел баг, если ставишь например 01 минута начало то все ломается)))

рони 09.03.2017 12:40

Александр2233,
что ломается?

Александр2233 09.03.2017 12:52

отображение 8: 0 пишет, а не 8: 00, а если написать 8: 01 то пишет 8: 1, функционал не должен, но еще не проверял

рони 09.03.2017 13:19

Александр2233,
m : "01" кавычки

wegas 22.04.2017 08:16

Здравствуйте, а как сделать такой таймер назначая время с полей от стольки до стольки?

рони 22.04.2017 08:39

wegas,
циклом пройти по значениям полей и составить массив данных с.

рони 05.05.2017 14:14

Цитата:

Сообщение от wegas
скрипт берёт время с сервера

:blink: где?


Часовой пояс GMT +3, время: 15:37.