☰

Clock figuccio

clock ore minuti secondi

当前为 2019-01-05 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Clock figuccio
// @description clock ore minuti secondi
// @version     1.0.0
// @include     *
// @author      figuccio
// @grant       GM_setValue
// @grant       GM_getValue
// @grant       GM_registerMenuCommand
// @icon        data:image/gif;base64,R0lGODlhEAAQAKECABEREe7u7v///////yH5BAEKAAIALAAAAAAQABAAAAIplI+py30Bo5wB2IvzrXDvaoFcCIBeeXaeSY4tibqxSWt2RuWRw/e+UQAAOw==

// @namespace https://greasyfork.org/users/237458
// ==/UserScript==

/*==================================================================================*/
const clockSettings = {
  opacity: '',       // Controls CSS Opacity and needs a value from 0 to 1
  fontSize: '20px',   // Sets the size of the clock.
  is12hour: false,       // Toggles between 24 hour or 12 hour clock.
  font: 'Arial',        // Allow a custom font
}
/*==================================================================================*/

function setStyles(styles) {
  styles.forEach(style => node.style.setProperty(style.name, style.value));
}

function changeOpacity(newOpacity){
  node.style.setProperty('opacity', newOpacity);
}

function updateClock() {
  let date = new Date();
  let time = date.toLocaleString('ita', {
    hour: 'numeric',
    minute: 'numeric',
    second:  'numeric',
    day :'numeric',
    month :'numeric',
    year:'numeric',
    weekday:'long',
    hour12: clockSettings.is12hour
  });
  node.innerHTML = time;
}

function isFullscreen() {
  return (window.fullScreen ||
    (window.innerWidth == screen.width && window.innerHeight == screen.height) ||
    (window.innerWidth >= screen.width && window.innerHeight >= screen.height) || /* Fix for chrome when zoom is < 100%  */
    (!window.screenTop && !window.screenY))
}

let node = document.createElement('div');
let textnode = document.createTextNode('');
node.appendChild(textnode);
setStyles([
  { name: 'position', value: 'fixed'},
  { name: 'bottom', value: '0' },
  { name: '', value: '0' },
  { name: 'background-color', value: 'red' },
  { name: 'color', value: 'white' },
  { name: 'z-index', value: '99999' },
  { name: 'font-size', value: clockSettings.fontSize  },
  { name: 'padding', value: '17px 4px' },
  { name: 'border-radius', value: '4px' },
  { name: 'border', value: '1px solid rgba(250, 250, 250, 0.3)' },
  { name: 'margin', value: '2px' },
  { name: 'font-family', value: '"' + clockSettings.font + '", sans-serif'  },
]);
document.body.appendChild(node);

setInterval(() => updateClock(), 1000);
window.addEventListener('resize', () => changeOpacity((isFullscreen())? clockSettings.opacity : '0'));
node.addEventListener('mouseout', () => changeOpacity(clockSettings.opacity));