☰

Clock figuccio

clock ore minuti secondi

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

  1. // ==UserScript==
  2. // @name        Clock figuccio
  3. // @description clock ore minuti secondi
  4. // @version     1.0.7
  5. // @include     *
  6. // @author      figuccio
  7. // @grant       GM_setValue
  8. // @grant       GM_getValue
  9. // @grant       GM_registerMenuCommand
  10. // @icon        data:image/gif;base64,R0lGODlhEAAQAKECABEREe7u7v///////yH5BAEKAAIALAAAAAAQABAAAAIplI+py30Bo5wB2IvzrXDvaoFcCIBeeXaeSY4tibqxSWt2RuWRw/e+UQAAOw==
  11.  
  12. // @namespace https://greasyfork.org/users/237458
  13. // ==/UserScript==
  14. const clockSettings = {
  15. opacity: '', // Opacity value da 0 a 1
  16.  
  17.   }
  18.  
  19. function setStyles(styles) {
  20.   styles.forEach(style => node.style.setProperty(style.name, style.value));
  21. }
  22.  
  23. function changeOpacity(newOpacity){
  24.   node.style.setProperty('opacity', newOpacity);
  25. }
  26. function updateClock() {
  27.   let date = new Date();
  28. // parametri per la lingua:
  29.  //   'ITA'   'ING'   'FRA'    'TED'    'SPA'     'POR'
  30.  // ITALIANO INGLESE FRANCESE TEDESCO  SPAGNOLO PORTOGHESE
  31.   let time = date.toLocaleString('ita', {
  32.       hour:'numeric',
  33.     minute:'numeric',
  34.     second:'numeric',
  35.        day:'numeric',
  36.      month:'long',
  37.       year:'numeric',
  38.    weekday:'long',
  39.     hour12: false
  40.  
  41.   });
  42.   node.innerHTML = time;
  43. }
  44.  
  45. function isFullscreen() {
  46.   return (window.fullScreen ||
  47.     (window.innerWidth == screen.width && window.innerHeight == screen.height) ||
  48.     (window.innerWidth >= screen.width && window.innerHeight >= screen.height) ||
  49.     (!window.screenTop && !window.screenY))
  50. }
  51.  
  52. let node = document.createElement('div');
  53. setStyles([
  54.   { name: 'position', value: 'fixed'},
  55.   { name: 'bottom', value: '0' },
  56.   { name: 'background-color', value: 'red' },
  57.   { name: 'color', value: 'white' },
  58.   { name: 'z-index', value: '99999' },
  59.   { name: 'font-size', value: '16px',},//dimensioni
  60.   { name: 'padding', value: '2px 2px 2px 2px' },//piccolo miglioramento rispetto ha prima su alcuni siti
  61.   { name: 'border-radius', value: '10px' },/* bordi arrotondati */
  62.   { name: 'border', value: '2px solid blue' },/* colore bordo */
  63.   { name:  'margin',value: ' 595px 9cm' }, /* 595pxaltezza 300pxlarghezza in cm  15cm 9cm */
  64.   { name:'font',value:'Arial'},
  65.   { name: 'cursor', value: 'move' },
  66. ]);
  67. document.body.appendChild(node);
  68.  
  69. setInterval(() => updateClock(), 1000);
  70. window.addEventListener('resize', () => changeOpacity((isFullscreen())? clockSettings.opacity : '0'));
  71. node.addEventListener('mouseout', () => changeOpacity(clockSettings.opacity));
  72. node.addEventListener('mouseover',() => changeOpacity(''));
  73.  
  74. node.addEventListener("mouseover", function( event ) {
  75.     // evidenzia il bersaglio del mouseover
  76.     event.target.style.color = "orange";
  77. // ripristinare il colore dopo un breve ritardo
  78.     setTimeout(function() {
  79.       event.target.style.color = "white";
  80.     }, 5000);
  81.   }, false);
  82.  
  83.  
  84.           //effetti speciali
  85. node.addEventListener("mouseover", function( event ) {
  86. event.target.style.background = "green";
  87.  setTimeout(function() {
  88.       event.target.style.background = "red";
  89.     }, 6000);
  90.   }, false);
  91.  
  92.              //effetti speciali bordo
  93. node.addEventListener("mouseover", function( event ) {
  94. event.target.style.border= "solid black";
  95. setTimeout(function() {
  96.       event.target.style.border = "solid blue";
  97.     }, 7000);
  98.   }, false);
  99.  
  100.           //nasconde orario al passaggio mouse per 2secondi
  101. node.addEventListener("mouseover", function( event ) {
  102. event.target.style.visibility= "hidden";
  103.  setTimeout(function() {
  104.       event.target.style.visibility = "";
  105.     }, 2000);
  106.   }, false);