<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<select name="" id="set_time">
<option value="0">выбрать</option>
<option value="-2">-2 часа</option>
<option value="-1">-1 часа</option>
<option value="0">0 часов</option>
<option value="1">+1 час</option>
<option value="2">+2 часа</option>
</select>
<div class="live"></div>
<script>
var obj = {
data: [{
time: {
h: 1,
m: 40
},
text: "программа 0"
}, {
time: {
h: 11,
m: 40
},
text: "программа 1"
}, {
time: {
h: 12,
m: 40
},
text: "программа 2"
}, {
time: {
h: 23,
m: 40
},
text: "программа 3"
}],
curent: 0
},
div = document.querySelector(".live");
obj.data.forEach(function(c, a) {
var b = document.createElement("p");
div.appendChild(b);
Object.defineProperty(obj, a, {
set: function(a) {
var h = (a.time.h + this.curent) % 24;
h < 0 && (h += 24);
b.innerHTML = h + ":" + a.time.m + " " + a.text
}
});
obj[a] = c
});
Object.defineProperty(obj, "show", {
set: function(c) {
this.curent = +c || 0;
this.data.forEach(function(a, b) {
obj[b] = a
})
}
});
document.querySelector("#set_time").addEventListener("change", function() {
obj.show = this.value
});
</script>
</body>
</html>