Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.12.2015, 09:51
Новичок на форуме
Отправить личное сообщение для iAlexandeR Посмотреть профиль Найти все сообщения от iAlexandeR
 
Регистрация: 23.12.2015
Сообщений: 1

Динамическое изменение времени.
Добрый день. Существует таблица "Время уроков", состоящая из 3-х столбцов (Начало, Конец, Перемена). Нужно с помощью js изменить значение элементов формы расположенных в ячейках таблицы, таким образом, чтобы время в первой ячейке было равным "08:00", во 2-ой ячейке +40 минут от первой, первая ячейка второй строки зависит от времени окончания урока + перемены и так для каждой строчки. Подтолкните, пожалуйста, в нужное направление.

Таблица:
<table id="tableTime">
            <tr><th>Начало</th><th>Конец</th><th>Перемена</th></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
</table>
Ответить с цитированием
  #2 (permalink)  
Старый 24.12.2015, 10:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

расписание уроков
iAlexandeR,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table id="tableTime">
            <tr><th>Начало</th><th>Конец</th><th>Перемена</th></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
</table>
<script>

window.addEventListener('DOMContentLoaded', function() {
var beginTime = document.querySelectorAll('.beginTime'),
    endTime = document.querySelectorAll('.endTime'),
    exchange = document.querySelectorAll('.exchange');
function formatTime(time)
{
  return  time.toTimeString().replace(/(\d\d:\d\d).*/,'$1')
}
function fn()
{  var time = new Date;
   time.setHours(8,0,0,0);
  [].forEach.call( beginTime, function(el,i) {
         el.value = formatTime(time);
         time.setMinutes(time.getMinutes()+40)
         endTime[i].value = formatTime(time);
         var ex = +exchange[i].value||5;
         time.setMinutes(time.getMinutes()+ex)
  });
}
fn();
[].forEach.call(exchange, function(item) {
        item.addEventListener('input', function() {
var num = +this.value;
num && num >=5 && num <= 20 &&  fn()
});
    });
 });
</script>
</body>

</html>

Последний раз редактировалось рони, 24.12.2015 в 11:04.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение прорачности фона после n-го количества времени. SneQ AstC Общие вопросы Javascript 15 16.10.2014 20:38
Динамическое изменение цены при изменении количества товара MrNix21 Элементы интерфейса 9 08.12.2013 21:47
Динамическое изменение времени Mutagena Общие вопросы Javascript 3 28.03.2012 12:13
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 17:17
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 16:55