Modern Time Display (Rounded)

Displays the current time in milliseconds

  1. // ==UserScript==
  2. // @name Modern Time Display (Rounded)
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0
  5. // @description Displays the current time in milliseconds
  6. // @author NEMES
  7. // @match *://*/*
  8. // @grant GM_addStyle
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. // Create the time display window
  16. const timeWindow = document.createElement('div');
  17. timeWindow.style.position = 'fixed';
  18. timeWindow.style.right = '0';
  19. timeWindow.style.top = '50%';
  20. timeWindow.style.transform = 'translateY(-50%)';
  21. timeWindow.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  22. timeWindow.style.color = '#ffffff';
  23. timeWindow.style.padding = '10px';
  24. timeWindow.style.fontFamily = 'Arial, sans-serif';
  25. timeWindow.style.fontSize = '24px';
  26. timeWindow.style.zIndex = '9999';
  27. timeWindow.style.pointerEvents = 'auto';
  28. timeWindow.style.userSelect = 'none';
  29. timeWindow.style.cursor = 'move';
  30. timeWindow.style.display = 'none'; // Set display to 'none' initially
  31. timeWindow.style.borderRadius = '10px'; // Add rounded corners
  32. document.body.appendChild(timeWindow);
  33.  
  34. // Create the return button
  35. const returnButton = document.createElement('button');
  36. returnButton.style.position = 'fixed';
  37. returnButton.style.right = '10px';
  38. returnButton.style.bottom = '10px';
  39. returnButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  40. returnButton.style.color = '#ffffff';
  41. returnButton.style.padding = '5px';
  42. returnButton.style.border = 'none';
  43. returnButton.style.zIndex = '9999';
  44. returnButton.innerText = 'Show';
  45. returnButton.style.borderRadius = '10px'; // Add rounded corners
  46. returnButton.addEventListener('click', () => {
  47. timeWindow.style.display = 'block';
  48. hideButton.style.display = 'block';
  49. returnButton.style.display = 'none';
  50. });
  51. document.body.appendChild(returnButton);
  52.  
  53. // Create the hide button
  54. const hideButton = document.createElement('button');
  55. hideButton.style.position = 'fixed';
  56. hideButton.style.right = '10px';
  57. hideButton.style.bottom = '10px';
  58. hideButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  59. hideButton.style.color = '#ffffff';
  60. hideButton.style.padding = '5px';
  61. hideButton.style.border = 'none';
  62. hideButton.style.zIndex = '9999';
  63. hideButton.style.display = 'none'; // Set display to 'none' initially
  64. hideButton.innerText = 'Hide';
  65. hideButton.style.borderRadius = '10px'; // Add rounded corners
  66. hideButton.addEventListener('click', () => {
  67. timeWindow.style.display = 'none';
  68. hideButton.style.display = 'none';
  69. returnButton.style.display = 'block';
  70. });
  71. document.body.appendChild(hideButton);
  72.  
  73. // Function to handle window movement
  74. let isDragging = false;
  75. let offset = { x: 0, y: 0 };
  76.  
  77. function handleMouseDown(event) {
  78. isDragging = true;
  79. offset.x = event.clientX - timeWindow.offsetLeft;
  80. offset.y = event.clientY - timeWindow.offsetTop;
  81. }
  82.  
  83. function handleMouseMove(event) {
  84. if (isDragging) {
  85. const x = event.clientX - offset.x;
  86. const y = event.clientY - offset.y;
  87. timeWindow.style.right = 'auto';
  88. timeWindow.style.left = `${x}px`;
  89. timeWindow.style.top = `${y}px`;
  90. }
  91. }
  92.  
  93. function handleMouseUp() {
  94. isDragging = false;
  95. }
  96.  
  97. // Attach event listeners for window movement
  98. timeWindow.addEventListener('mousedown', handleMouseDown);
  99. document.addEventListener('mousemove', handleMouseMove);
  100. document.addEventListener('mouseup', handleMouseUp);
  101.  
  102. // Function to update the time display
  103. function updateTimeDisplay() {
  104. const currentTime = new Date();
  105. const hours = currentTime.getHours().toString().padStart(2, '0');
  106. const minutes = currentTime.getMinutes().toString().padStart(2, '0');
  107. const seconds = currentTime.getSeconds().toString().padStart(2, '0');
  108. const milliseconds = currentTime.getMilliseconds().toString().padStart(3, '0');
  109. timeWindow.innerText = `${hours}:${minutes}:${seconds}.${milliseconds}`;
  110. }
  111.  
  112. // Update the time display every millisecond
  113. setInterval(updateTimeDisplay, 1);
  114.  
  115. // Show the return button by default
  116. returnButton.style.display = 'block';
  117. })();