22.03.2019, 11:35
|
|
Аспирант
|
|
Регистрация: 07.03.2017
Сообщений: 30
|
|
Доделал с расписанием может кому пригодятся наработки))
<!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>
Последний раз редактировалось wegas, 22.03.2019 в 11:39.
|
|
10.12.2019, 11:29
|
|
Новичок на форуме
|
|
Регистрация: 10.12.2019
Сообщений: 1
|
|
|
помогите переписать этот код на VUE JS
Подскажите как сделать также на VUE немного не понимаю как переписать(
|
|
11.12.2019, 12:31
|
|
Аспирант
|
|
Регистрация: 07.03.2017
Сообщений: 30
|
|
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>
Последний раз редактировалось wegas, 11.12.2019 в 12:42.
|
|
|
|
