Помогите с информационым таймером
Нужен скрипт сколько до конца урока, до конца перемены, чтобы он работал каждый день, циклично, я в 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>
|
Расписание школьных звонков
Александр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>
|
Огромное спасибо))
|
нашел баг, если ставишь например 01 минута начало то все ломается)))
|
Александр2233,
что ломается? |
отображение 8: 0 пишет, а не 8: 00, а если написать 8: 01 то пишет 8: 1, функционал не должен, но еще не проверял
|
Александр2233,
m : "01" кавычки |
Здравствуйте, а как сделать такой таймер назначая время с полей от стольки до стольки?
|
wegas,
циклом пройти по значениям полей и составить массив данных с. |
Цитата:
|
все понял, не проверил и сказал)) и вопрос тогда другой как сделать так чтобы это было под определенный часовой пояс...
|
Rise,
:thanks: |
wegas,
проверяйте ... -180 места установки таймзоны в минутах (Москва на 2017г.)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body><div id = 'show'></div>
<script>
Date.prototype.setTimezoneOffset = function(minutes) {
var _minutes;
if (this.timezoneOffset == _minutes) {
_minutes = this.getTimezoneOffset();
} else {
_minutes = this.timezoneOffset;
}
if (arguments.length) {
this.timezoneOffset = minutes;
} else {
this.timezoneOffset = minutes = this.getTimezoneOffset();
}
return this.setTime(this.getTime() + (_minutes - minutes) * 6e4);
};
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;
a.setTimezoneOffset(-180);
var 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();
var k;
for (b = 0; b < c.length && !(k = new Date,k.setTimezoneOffset(-180), a = d[b] - k.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>
|
Цитата:
|
Цитата:
|
wegas,
:-? |
Добрый вечер, пытаюсь переделать ваш скрипт чтобы было начало и конец события, пока безрезультатно. Мне нужно чтобы массив "C" можно было забивать примерно в таком виде:
c = [ {t : "Занятия завершены", h : 7, m : 00, h2: 8, m2: 00}, {t : "До начала 1 урока", h : 8, m : 00, h2: 8, m2: 45}, {t : "До окончания 1 урока(перемена)", h : 8, m : 45, h2: 8, m2: 55}, ] нужно для того чтобы составить расписание уроков и текущий урок обозначить красным цветом. и чтобы события именно в этот промежуток времени воспроизводилось)) если нет такого события по времени или оно прошло, то показывало что сейчас нет событий. Например: c = [ {t : "Занятия завершены", h : 0, m : 00, h2: 7, m2: 10}, {t : "До начала 1 урока", h : 8, m : 00, h2: 8, m2: 45}, {t : "До окончания 1 урока(перемена)", h : 8, m : 45, h2: 8, m2: 55}, {t : "Занятия завершены", h : 17, m : 00, h2: 0, m2: 00}, ] здесь с 7: 10 до 8 часов нет события, отображало что сейчас нет событий, с 8 55 до 17 00 тоже нет событий!! или как нибудь так)) С расписанием сделал так, переделав скрипт не меняя логики немного кривовато, но работает))
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body><div id = 'show'></div>
<div id = 'Lessontimer_time2'></div>
<script>
function Lesson() {
var yrokvivod = [];
c = [
{t : "Занятия завершены", h : 7, m : 00, lesson:11},
{t : "До начала 1 урока", h : 8, m : 00, lesson:1},
{t : "До окончания 1 урока", h : 8, m : 45, lesson:1},
{t : "До начала 2 урока", h : 8, m : 55, lesson:2},
{t : "До окончания 2 урока", h : 9, m : 40, lesson:2},
{t : "До начала 3 урока", h : 10, m : 05, lesson:3},
{t : "До окончания 3 урока", h : 10, m : 50, lesson:3},
{t : "До начала 4 урока", h : 11, m : 15, lesson:4},
{t : "До окончания 4 урока", h : 12, m : 00, lesson:4},
{t : "До начала 5 урока", h : 12, m : 25, lesson:5},
{t : "До окончания 5 урока", h : 13, m : 10, lesson:5},
{t : "До начала 6 урока", h : 13, m : 20, lesson:6},
{t : "До окончания 6 урока", h : 14, m : 05, lesson:6},
{t : "До начала 7 урока", h : 14, m : 20, lesson:7},
{t : "До окончания 7 урока", h : 15, m : 05, lesson:7},
{t : "До начала 8 урока", h : 15, m : 15, lesson:8},
{t : "До окончания 8 урока", h : 16, m : 00, lesson:8},
{t : "До начала 9 урока", h : 16, m : 10, lesson:9},
{t : "До окончания 9 урока", h : 16, m : 55, lesson:9},
{t : "До начала 10 урока", h : 17, m : 05, lesson:10},
{t : "До окончания 10 урока", h : 17, m : 55, lesson:10},
{t : "Занятия завершены", h : 7, m : 00, lesson:11},
],
yrok = [];
array = [];
lesson1 = [];
j= 0;
k = 1;
for (var i = 0; i < c.length; i++) {
yrok = [c[i].lesson];
if (yrok != 0){
for (var property in yrok) {
yrokvivod.push(yrok[property]);
}
}
}
uniqueArray = yrokvivod.filter(function(elem, pos) {
return yrokvivod.indexOf(elem) == pos;
});
for (var i = 0; i < c.length; i++) { // перебераем весь массив с уроками
yrok = [c[i].lesson]; // записываем
for (var j = 0; j < uniqueArray.length; j++) {
if (yrok == uniqueArray[j]){
array.push = [c[i].h + " : " + c[i].m];
//console.log('j' + j);
for (var property in array) {
lesson1.push(array[property]);
//console.log(lesson1);
}
}
}
}
for(var i = 0; i < lesson1.length; ++i) {
document.getElementById("Lessontimer_time2").innerHTML += "<div id='k" + k + "'>" + k +' Урок: c ' + lesson1[i] + ' по ' + lesson1[++i] + '</br>';
k++
}
};
Lesson();
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 : 00, lesson:11},
{t : "До начала 1 урока", h : 8, m : 00, lesson:1},
{t : "До окончания 1 урока", h : 8, m : 45, lesson:1},
{t : "До начала 2 урока", h : 8, m : 55, lesson:2},
{t : "До окончания 2 урока", h : 9, m : 40, lesson:2},
{t : "До начала 3 урока", h : 10, m : 05, lesson:3},
{t : "До окончания 3 урока", h : 10, m : 50, lesson:3},
{t : "До начала 4 урока", h : 11, m : 15, lesson:4},
{t : "До окончания 4 урока", h : 12, m : 00, lesson:4},
{t : "До начала 5 урока", h : 12, m : 25, lesson:5},
{t : "До окончания 5 урока", h : 13, m : 10, lesson:5},
{t : "До начала 6 урока", h : 13, m : 20, lesson:6},
{t : "До окончания 6 урока", h : 14, m : 05, lesson:6},
{t : "До начала 7 урока", h : 14, m : 20, lesson:7},
{t : "До окончания 7 урока", h : 15, m : 05, lesson:7},
{t : "До начала 8 урока", h : 15, m : 15, lesson:8},
{t : "До окончания 8 урока", h : 16, m : 00, lesson:8},
{t : "До начала 9 урока", h : 16, m : 10, lesson:9},
{t : "До окончания 9 урока", h : 16, m : 55, lesson:9},
{t : "До начала 10 урока", h : 17, m : 05, lesson:10},
{t : "До окончания 10 урока", h : 17, m : 55, lesson:10},
{t : "Занятия завершены", h : 7, m : 00, lesson:11},
],
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++);
if (c[b].t != 'Занятия завершены'){
var style2 = c[b].lesson;
document.getElementById("k"+ style2).style.backgroundColor = "#960505";
document.getElementById("show").innerHTML = c[b].t + " в " +c[b].h +":"+c[b].m+ " осталось " + formatTime(a);
window.setTimeout(Time, 1E3)
}
else {
var style2 = c[b].lesson;
document.getElementById("k"+ style2).style.backgroundColor = "#960505";
document.getElementById("show").innerHTML = c[b].t;
window.setTimeout(Time, 1E3)
}
};
Time();
</script>
</body>
</html>
|
расписание от и до
wegas,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body><div id = 'show'></div>
<script>
Date.prototype.setTimezoneOffset = function(minutes) {
var _minutes;
if (this.timezoneOffset == _minutes) {
_minutes = this.getTimezoneOffset();
} else {
_minutes = this.timezoneOffset;
}
if (arguments.length) {
this.timezoneOffset = minutes;
} else {
this.timezoneOffset = minutes = this.getTimezoneOffset();
}
return this.setTime(this.getTime() + (_minutes - minutes) * 6e4);
};
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;
a.setTimezoneOffset(-180);
var ms = a.getTime();
var c = [{
t: "Занятия завершены",
h: 0,
m: 00,
h2: 7,
m2: 10
},
{
t: "До начала 1 урока",
h: 8,
m: 00,
h2: 8,
m2: 45
},
{
t: "До окончания 1 урока(перемена)",
h: 8,
m: 45,
h2: 8,
m2: 55
},
{
t: "Занятия завершены",
h: 17,
m: 00,
h2: 23,
m2: 59
},
{
t: "До начала 15 урока",
h: 20,
m: 00,
h2: 22,
m2: 30
},
];
c = c.filter(function(v) {
a.setHours(v.h, v.m, 0, 0)
var from = a.getTime();
a.setHours(v.h2, v.m2, 0, 0);
var to = a.getTime();
v.time = to - ms;
return from < ms && ms < to
})
var html = c.reduce(function(html, v) {
return html += v.t + " по Москве до " + v.h2 + ":" + v.m2 + " осталось " + formatTime(v.time) + "<br>";
}, "")
document.getElementById("show").innerHTML = html || "сейчас нет событий";
window.setTimeout(Time, 1E3)
};
Time()
</script>
</body>
</html>
|
Класс, спасибо!
|
Доделал с расписанием может кому пригодятся наработки))
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body><div id = 'show'></div>
<div id = 'Lessontimer_time2'></div>
<script>
function table() {
var c = [
{t : "Занятия завершены", h : 00, m : 00, h2: 7, m2: 00, lesson:'Конец дня', lesid:1},
{t : "До начала 1 урока", h : 7, m : 00, h2: 8, m2: 00, lesson:'Перемена', lesid:2},
{t : "До окончания 1 урока", h : 8, m : 00, h2: 8, m2: 45, lesson:'1 Урок', lesid:3},
{t : "До начала 2 урока", h : 8, m : 45, h2: 8, m2: 55, lesson:'Перемена', lesid:4},
{t : "До окончания 2 урока", h : 8, m : 55, h2: 9, m2: 40, lesson:'2 Урок', lesid:5},
{t : "До начала 3 урока", h : 9, m : 40, h2: 10, m2: 05, lesson:'Перемена', lesid:6},
{t : "До окончания 3 урока", h : 10, m : 05, h2: 10, m2: 50, lesson:'3 Урок', lesid:7},
{t : "До начала 4 урока", h : 10, m : 50, h2: 11, m2: 15, lesson:'Перемена', lesid:8},
{t : "До окончания 4 урока", h : 11, m : 15, h2: 12, m2: 00, lesson:'4 Урок', lesid:9},
{t : "До начала 5 урока", h : 12, m : 00, h2: 12, m2: 25, lesson:'Перемена', lesid:10},
{t : "До окончания 5 урока", h : 12, m : 25, h2: 13, m2: 10, lesson:'5 Урок', lesid:11},
{t : "До начала 6 урока", h : 13, m : 10, h2: 13, m2: 20, lesson:'Перемена', lesid:12},
{t : "До окончания 6 урока", h : 13, m : 20, h2: 14, m2: 05, lesson:'6 Урок', lesid:13},
{t : "До начала 7 урока", h : 14, m : 05, h2: 14, m2: 20, lesson:'Перемена', lesid:14},
{t : "До окончания 7 урока", h : 14, m : 20, h2: 15, m2: 05, lesson:'7 Урок', lesid:15},
{t : "До начала 8 урока", h : 15, m : 05, h2: 15, m2: 15, lesson:'Перемена', lesid:16},
{t : "До окончания 8 урока", h : 15, m : 15, h2: 16, m2: 00, lesson:'8 Урок', lesid:17},
{t : "До начала 9 урока", h : 16, m : 00, h2: 16, m2: 10, lesson:'Перемена', lesid:18},
{t : "До окончания 9 урока", h : 16, m : 10, h2: 16, m2: 55, lesson:'9 Урок', lesid:19},
{t : "До начала 10 урока", h : 16, m : 55, h2: 17, m2: 05, lesson:'Перемена', lesid:20},
{t : "До окончания 10 урока", h : 17, m : 05, h2: 17, m2: 55, lesson:'10 Урок', lesid:21},
{t : "Занятия завершены", h : 17, m : 55, h2: 23, m2: 59, lesson:'Перемена', lesid:22},
]
for(var i = 0; i < c.length; ++i) {
if(c[i].lesson == 'Перемена'){
}
else{
document.getElementById("Lessontimer_time2").innerHTML += "<div id='k" + c[i].lesid + "'>" + c[i].lesson +' c ' + c[i].h + ':' + c[i].m + ' по ' + c[i].h2 + ':'+ c[i].m2 + '</br>';
}
}
};
table()
Date.prototype.setTimezoneOffset = function(minutes) {
var _minutes;
if (this.timezoneOffset == _minutes) {
_minutes = this.getTimezoneOffset();
} else {
_minutes = this.timezoneOffset;
}
if (arguments.length) {
this.timezoneOffset = minutes;
} else {
this.timezoneOffset = minutes = this.getTimezoneOffset();
}
return this.setTime(this.getTime() + (_minutes - minutes) * 6e4);
};
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;
a.setTimezoneOffset();
var ms = a.getTime();
c = [
{t : "Занятия завершены", h : 00, m : 00, h2: 7, m2: 00, lesson:'Конец дня', lesid:1},
{t : "До начала 1 урока", h : 7, m : 00, h2: 8, m2: 00, lesson:'Перемена', lesid:2},
{t : "До окончания 1 урока", h : 8, m : 00, h2: 8, m2: 45, lesson:'1 Урок', lesid:3},
{t : "До начала 2 урока", h : 8, m : 45, h2: 8, m2: 55, lesson:'Перемена', lesid:4},
{t : "До окончания 2 урока", h : 8, m : 55, h2: 9, m2: 40, lesson:'2 Урок', lesid:5},
{t : "До начала 3 урока", h : 9, m : 40, h2: 10, m2: 05, lesson:'Перемена', lesid:6},
{t : "До окончания 3 урока", h : 10, m : 05, h2: 10, m2: 50, lesson:'3 Урок', lesid:7},
{t : "До начала 4 урока", h : 10, m : 50, h2: 11, m2: 15, lesson:'Перемена', lesid:8},
{t : "До окончания 4 урока", h : 11, m : 15, h2: 12, m2: 00, lesson:'4 Урок', lesid:9},
{t : "До начала 5 урока", h : 12, m : 00, h2: 12, m2: 25, lesson:'Перемена', lesid:10},
{t : "До окончания 5 урока", h : 12, m : 25, h2: 13, m2: 10, lesson:'5 Урок', lesid:11},
{t : "До начала 6 урока", h : 13, m : 10, h2: 13, m2: 20, lesson:'Перемена', lesid:12},
{t : "До окончания 6 урока", h : 13, m : 20, h2: 14, m2: 05, lesson:'6 Урок', lesid:13},
{t : "До начала 7 урока", h : 14, m : 05, h2: 14, m2: 20, lesson:'Перемена', lesid:14},
{t : "До окончания 7 урока", h : 14, m : 20, h2: 15, m2: 05, lesson:'7 Урок', lesid:15},
{t : "До начала 8 урока", h : 15, m : 05, h2: 15, m2: 15, lesson:'Перемена', lesid:16},
{t : "До окончания 8 урока", h : 15, m : 15, h2: 16, m2: 00, lesson:'8 Урок', lesid:17},
{t : "До начала 9 урока", h : 16, m : 00, h2: 16, m2: 10, lesson:'Перемена', lesid:18},
{t : "До окончания 9 урока", h : 16, m : 10, h2: 16, m2: 55, lesson:'9 Урок', lesid:19},
{t : "До начала 10 урока", h : 16, m : 55, h2: 17, m2: 05, lesson:'Перемена', lesid:20},
{t : "До окончания 10 урока", h : 17, m : 05, h2: 17, m2: 55, lesson:'10 Урок', lesid:21},
{t : "Занятия завершены", h : 17, m : 55, h2: 23, m2: 59, lesson:'Перемена', lesid:22},
],
c = c.filter(function(v) {
a.setHours(v.h, v.m, 0, 0)
var from = a.getTime();
a.setHours(v.h2, v.m2, 0, 0);
var to = a.getTime();
v.time = to - ms;
return from < ms && ms < to
})
var html = c.reduce(function(html, v) {
return html += v.lesson + ' ' + v.t + " " + v.h2 + ":" + v.m2 + " осталось " + formatTime(v.time) + "<br>";
}, ""),
table = c.reduce(function(html, v) {
return table = v.lesid
}, "")
for(var i = 0; i < c.length; ++i) {
if (c[i].lesson == 'Перемена'){
}
else {
document.getElementById("k"+ table).style.backgroundColor = "#960505";
}
}
console.log(table);
document.getElementById("show").innerHTML = html || "сейчас нет событий";
window.setTimeout(Time, 1E3)
};
Time()
</script>
</body>
</html>
|
помогите переписать этот код на VUE JS
Подскажите как сделать также на VUE немного не понимаю как переписать(
|
https://jsfiddle.net/j2FunOnly/51Lhk4sv/
компонент app.js
Vue.component('lessontimer-component', require('./components/site/InfoComponent.vue').default);
путь к компоненту - /components/site/InfoComponent.vue
<template>
<div class="container">
<div class="row">
<div id="show">
<span v-if="current">
{{current.lesson}} {{current.t}} {{current.h2}}:{{current.m2}} осталось {{current.time | formatTime}}
</span>
<span v-else>
сейчас нет событий
</span>
</div>
<div id='Lessontimer_time2'>
<div v-for="item in schedule"
v-if="item.lesson !== 'Перемена'"
:id="`k${item.lesid}`"
:key="item.lesid"
:style="item.lesid === current.lesid ? 'backgroundColor: #960505' : ''"
>
{{item.lesson}} c {{item.h}}:{{item.m}} по {{item.h2}}:{{item.m2}}
<br>
</div>
</div>
</div>
</div>
</template>
<script>
const schedule = [
{ t: "Занятия завершены", h: '00', m: '00', h2: '07', m2: '00', lesson: 'Конец дня', lesid: 1 },
{ t: "До начала 1 урока", h: '07', m: '00', h2: '08', m2: '00', lesson: 'Перемена', lesid: 2 },
{ t: "До окончания 1 урока", h: '08', m: '00', h2: '08', m2: '45', lesson: '1 Урок', lesid: 3 },
{ t: "До начала 2 урока", h: '08', m: '45', h2: '08', m2: '55', lesson: 'Перемена', lesid: 4 },
{ t: "До окончания 2 урока", h: '08', m: '55', h2: '09', m2: '40', lesson: '2 Урок', lesid: 5 },
{ t: "До начала 3 урока", h: '09', m: '40', h2: '10', m2: '05', lesson: 'Перемена', lesid: 6 },
{ t: "До окончания 3 урока", h: '10', m: '05', h2: '10', m2: '50', lesson: '3 Урок', lesid: 7 },
{ t: "До начала 4 урока", h: '10', m: '45', h2: '11', m2: '15', lesson: 'Перемена', lesid: 8 },
{ t: "До окончания 4 урока", h: '11', m: '15', h2: '12', m2: '00', lesson: '4 Урок', lesid: 9 },
{ t: "До начала 5 урока", h: '12', m: '00', h2: '12', m2: '25', lesson: 'Перемена', lesid: 10 },
{ t: "До окончания 5 урока", h: '12', m: '25', h2: '13', m2: '10', lesson: '5 Урок', lesid: 11 },
{ t: "До начала 6 урока", h: '13', m: '10', h2: '13', m2: '20', lesson: 'Перемена', lesid: 12 },
{ t: "До окончания 6 урока", h: '13', m: '20', h2: '14', m2: '05', lesson: '6 Урок', lesid: 13 },
{ t: "До начала 7 урока", h: '14', m: '05', h2: '14', m2: '20', lesson: 'Перемена', lesid: 14 },
{ t: "До окончания 7 урока", h: '14', m: '20', h2: '15', m2: '05', lesson: '7 Урок', lesid: 15 },
{ t: "До начала 8 урока", h: '15', m: '05', h2: '15', m2: '15', lesson: 'Перемена', lesid: 16 },
{ t: "До окончания 8 урока", h: '15', m: '15', h2: '16', m2: '00', lesson: '8 Урок', lesid: 17 },
{ t: "До начала 9 урока", h: '16', m: '00', h2: '16', m2: '10', lesson: 'Перемена', lesid: 18 },
{ t: "До окончания 9 урока", h: '16', m: '10', h2: '16', m2: '55', lesson: '9 Урок', lesid: 19 },
{ t: "До начала 10 урока", h: '16', m: '55', h2: '17', m2: '05', lesson: 'Перемена', lesid: 20 },
{ t: "До окончания 10 урока", h: '17', m: '05', h2: '17', m2: '55', lesson: '10 Урок', lesid: 21 },
{ t: "Занятия завершены", h: '17', m: '55', h2: '23', m2: '59', lesson: 'Перемена', lesid: 22 },
];
Date.prototype.setTimezoneOffset = function(minutes) {
var _minutes;
if (this.timezoneOffset == _minutes) {
_minutes = this.getTimezoneOffset();
} else {
_minutes = this.timezoneOffset;
}
if (arguments.length) {
this.timezoneOffset = minutes;
} else {
this.timezoneOffset = minutes = this.getTimezoneOffset();
}
return this.setTime(this.getTime() + (_minutes - minutes) * 6e4);
};
const two = a => (9 < a ? "" : "0") + a;
Vue.filter('two', two);
Vue.filter('formatTime', a => {
a = Math.floor(a / 1E3);
var c = Math.floor(a / 60);
var d = Math.floor(c / 60);
a %= 60;
c %= 60;
return two(d) + ":" + two(c) + ":" + two(a)
});
import moment from 'moment';
export default {
data:function() {
return {
schedule,
current: null,
}
},
methods: {
tick() {
const a = new Date();
a.setTimezoneOffset();
const ms = a.getTime();
this.current = Object.assign({}, this.current, this.schedule.find(v => {
a.setHours(v.h, v.m, 0, 0)
const from = a.getTime();
a.setHours(v.h2, v.m2, 0, 0);
const to = a.getTime();
v.time = to - ms;
return from < ms && ms < to
}));
var c = this.schedule.filter(function(v) {
a.setHours(v.h, v.m, 0, 0)
var from = a.getTime();
a.setHours(v.h2, v.m2, 0, 0);
var to = a.getTime();
v.time = to - ms;
return from < ms && ms < to
});
var html = c.reduce(function(html, v) {
return html += v.lesson + ' ' + v.t + " " + v.h2 + ":" + v.m2;
}, "");
console.log(html)
}
},
beforeMount () {
this.tick();
},
mounted () {
window.setInterval(() => this.tick(), 1000);
}
}
</script>
подключение компонента <lessontimer-component></lessontimer-component> |
| Часовой пояс GMT +3, время: 13:15. |