Debido a que estamos lidiando con el tiempo, esto obviamente no se ha probado completamente y se limita a las veces que usted dio ejemplo.
Le damos a cada Rectángulo de Evento un nombre de clase.
El nombre de la clase será el nombre de la palabra para la hora.
El rectángulo vivo y el texto en vivo también obtienen sus propios nombres de clase.
El código coincidirá con la hora de fechas actual con el valor i correspondiente en la matriz dg_val usando la hora como índice.
Luego hacemos que el rectángulo vivo y el texto en vivo se muevan al evento correcto haciendo coincidir la propiedad superior Rectángulo de eventos.
También obtenemos los minutos actuales de la hora y calculamos cuántos quedan hasta la hora siguiente.
Utilizamos los milisegundos resultantes para disparar un tiempo de espera para ejecutar el código de nuevo en la hora.
Because we are dealing with time, this obviously has not been fully tested and is limited to the times you exampled.
We give each Event Rectangle a class name.
The class name will be the word name for the hour.
The vivo rectangle and the en vivo text also get their own class names.
The code will match the current dates hour to the corresponding i value in the dg_val array using the hour as the index.
We then make the vivo Rectangle and en vivo text move to the correct event by matching the events Rectangle top property.
We also get the current minutes of the hour and calculate how many are left until the next hour.
We use the resulting milliseconds to fire a timeout to run the code again on the hour.
var date_ = new Date();
//********>>>>>>>>>>>>>>
date_.setHours(8);//-- para probar la hora comentar cuando termine la prueba -- for testing the hour comment out when finnished testing
///*******<<<<<<<<<<<<<<<<
var dg_val = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine','ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen','twenty','twentyone','twentytwo','twentythree'];
var vivo_ = document.querySelector('.vivo')
var envivo_ = document.querySelector('.envivo')
var hour = dg_val[date_.getHours()]
var minutes = date_.getMinutes()
var currentHour = document.querySelector("." + hour)
var currentHourTop = hypeDocument.getElementProperty(currentHour, 'top')
hypeDocument.setElementProperty(vivo_, 'top', currentHourTop - 10, 1.0, 'easeinout')
hypeDocument.setElementProperty(envivo_, 'top', currentHourTop - 15, 1.0, 'easeinout')
var timeOut = ((60-minutes)*60) *1000 //== milliseconds
console.log(timeOut)
setTimeout(function(minutes){
hypeDocument.functions().vivo(hypeDocument, element, event)
}, timeOut);
--
cuadrocadahora_mhv1.hype.zip (51.4 KB)