Installation

Configuration

exto personalizado de la esfera del reloj

// Muestra el tiempo de 12 horas seguido de día, mes (inglés, nombre completo) y año con "(UTC)" al final
window.DisplayClockJS = '%2I:%2M:%2S %p %2d %{January;February;March;April;May;June;July;August;September;October;November;December}m %Y (UTC)';

Esta última sintaxis es la más poderosa, pero eso también la hace más complicada. Vea las instrucciones aquí .

También es posible colocar el reloj dentro de la barra de herramientas inferior y configurar varias otras funciones si desea hacerlo:

// Muestra el tiempo de 12 horas seguido de día, mes (inglés, nombre completo) y año con "(UTC)" al final
window.DisplayClockJS = {
    format: '%2I:%2M:%2S %p %2d %{January;Febuary;March;April;May;June;July;August;September;October;November;December}m %Y (UTC)',
    hoverText: 'This is what the user sees when they hover their mouse over the link',
    interval: 500, /* How often the timer updates in milliseconds (1000=1 second) */
    location: 'toolbar',
    monofonts: 'Consolas, monospace', /* The font the clock uses by default */
    offset: 480 /* Time offset from UTC in minutes - 480 changes the clock from UTC to CST (China Standard Time) */
};
importArticle({type:'script', article:'u:dev:MediaWiki:UTCClock/code.js'});

Interfaz de código

Puede modificar el valor de DisplayClockJS.format mientras el reloj está funcionando, lo que cambiará instantáneamente el texto que muestra para usted. También hay una función de matanza que parará el reloj y sacarlo de la interfaz de usuario para usted: DisplayClockJS.kill(). [Puede acceder a estos a través de su consola JavaScript si los necesita por algún motivo, ya que la edición en vivo de la cadena de formato puede ser útil para experimentar con las opciones].

Cambiar la apariencia

El elemento de reloj tiene la id DisplayClockJS, por lo que puede aplicar reglas CSS para cambiar la apariencia:

/* Cuando se muestra en el encabezado */
a#DisplayClockJS { color: red !important }
/* Cuando se muestra en la barra de herramientas inferior / otras máscaras
li#DisplayClockJS > a { color: red !important } */
li#DisplayClockJS > a { color: red !important }
/* Usa una fuente monoespaciada */
#DisplayClockJS { font-family: 'Lucida Console', monospace }

Los usuarios pueden ocultar el reloj insertando el siguiente código en su CSS personal:

#DisplayClockJS {
    display: none;
}

Personalizar el reloj

La sintaxis del reloj se basa en la función strftime de C/C++, pero es ligeramente diferente. Básicamente, window.DisplayClockJS toma un bloque de texto arbitrario que aparecerá sin cambios en el reloj excepto por los símbolos mágicos %. Cada símbolo % tiene la siguiente forma:

Type 1:  % <Minimum Length> <Letter>
Example: %d = Current day of the month, no minimum length (e.g. 2)
         %2d = Current day of the month, force it to always have at least 2 characters (e.g. 02)
Type 2:  % {<Semicolon List>} <Letter>
Example: %{Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday}w = Displays English day of the week
Type 3:  %% = Produces a single % symbol

El último elemento de una lista se utilizará para todo lo que supere la longitud de la lista. Si solo hay 6 entradas en una lista de día de la semana, entonces la última (6ª) se utilizará para los dos últimos 2 días de la semana.

A diferencia de strftime, no hay longitudes mínimas predeterminadas. Si no proporciona su propio número de ancho, siempre será tan ancho como sea necesario. Si desea que el número del día del mes tenga siempre 2 caracteres de ancho, debe solicitarlo específicamente usando %2d en lugar de solo %d.