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>