API tools faq
paste
Advertisement
Guest User

Epoch time converter (revision 2022-09-30)

a guest
Oct 2nd, 2022
26
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.96 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Epoch time converter with automatic detection</title>
  5.  
  6.     <!-- the viewport meta tag magnifies the page on mobile browsers to make it useable there -->
  7.     <meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
  8.  
  9.     <style type="text/css">
  10.         /* modern font pack */
  11.         body { font-family: ubuntu,'noto sans','open sans', calibri, 'segoe ui', 'trebuchet ms', arial, helvetica, verdana, tahoma, 'Bitstream Vera Sans', 'sans-serif'; }
  12.    
  13.         div { margin-bottom: 1em; } /* small gap between divisions */
  14.         JS_show { opacity:0.2; pointer-events:none; } /* Initially grey out containers that are only meant to be shown with JavaScript activated, in order to provide a preview. */
  15.         /* for completely hiding it if preferred, use: JS_show { display: none; } */
  16.  
  17.         no_select { /* for text that is not to be highlighted */
  18.             /* vendor prefixes for compatibility, see https://developer.mozilla.org/en-US/docs/Web/CSS/user-select */
  19.             -moz-user-select: none; /* supported since Firefox 1.0 */
  20.             -webkit-user-select: none; /* since Chrome 1.0 */
  21.             -ms-user-select: none; /* since Edge 12.0 */
  22.             user-select: none; /* Chrome 54 (2016-10), Firefox 69 (2019-09) */
  23.         }
  24.  
  25.         /* prevent buttons from sticking to input field in mobile view */
  26.         button { margin-top: 1em; }
  27.  
  28.         /* dark theme */
  29.         body { background-color: #333; color: #ddd; }
  30.         a { color: lightblue; }
  31.     </style>
  32. </head>
  33.  
  34. <body>
  35.  
  36. <JS_show>
  37.     <!-- JS_show container: only reveal contents if JavaScript is activated. Code implemented in JavaScript part further down. -->
  38. <div id="time_input_container">
  39.     <input
  40.         autofocus="true"
  41.         id="time_input"
  42.         placeholder="Date/time or unix time stamp"
  43.         onkeyup="epoch.keyup(event);"
  44.         onkeypress="epoch.keypress(event);"
  45.         size="30"
  46.     >
  47.     </input>
  48.     <!-- The "autofocus" parameter focuses the field from the beginning, so the user can start typing immediately. -->
  49.     <!-- The "onkeyup" event updates the calculation automatically after each character is entered. -->
  50.     <!-- The "onkeypress" event separately implements updating the calculation and the URL hash
  51. by pressing the enter/return (↵) key. -->
  52.     <!-- The placeholder text is displayed when the input field is empty. -->
  53.     <!-- Size (input field width) set to 30 characters to fit in the placeholder text. -->
  54.  
  55.     <button class="run_script" onclick="epoch.convert(); document.location.hash=time_input.value;">
  56.         Auto-detect and convert
  57.     </button>
  58.  
  59.     <!-- interchanges the date and time with the epoch time stamp -->
  60.     <button class="epoch_swap" onclick="epoch.swap();">Swap</button>
  61.  
  62.     <!-- sets the input to the current date and time -->
  63.     <button class="epoch_now" onclick="epoch.now();">Now</button>
  64.  
  65.     <!-- more convenient clearing of the input field, mainly for mobile users -->
  66.     <button class="epoch_clear" onclick="epoch.clear();">Clear</button>
  67. </div>
  68. <div id="time_output"><!-- The calculated time will appear here. --></div>
  69. </JS_show>
  70.  
  71. <noscript>
  72.     <!-- This guidance is shown if JavaScript is not available in the user's browser. -->
  73.     <h2>JavaScript is unavailable</h2>
  74.     <p>To convert dates and time stamps, please activate JavaScript or use a web browser that supports it.</p>
  75.     <p>If you are seeing this error in the Android HTML viewer, enter the path to this HTML file into the address bar of the web browser.</p>
  76. </noscript>
  77.  
  78. <script type="text/javascript">
  79. // create nodes for input field and output container
  80. var time_input = document.getElementById("time_input");
  81. var time_output = document.getElementById("time_output");
  82.  
  83. var epoch = {}; // create data object
  84. var count=0,input="";input=""; // defeats JS Hint error; no functional difference
  85.  
  86.     // reveals "JS_show" containers
  87. if ( document.getElementsByTagName("JS_show")[0] ) /* check if JS_show containers exist */ {
  88.     for (
  89.         count=0; // initiate counter
  90.         count < document.getElementsByTagName("JS_show").length; // count JS_show containers
  91.         count++ // count up. Same as count+=1 and count=count+1.
  92.     ) {
  93.         // restore opacity and/or unhide by overriding CSS at the top using inline CSS:
  94.         document.getElementsByTagName("JS_show")[count].setAttribute("style","display:block; opacity:1; pointer-events:all;");
  95.     }
  96. }
  97.  
  98.     // detects the format in the input field
  99. epoch.detect = function(input) {
  100.     input+=""; // force data type into string instead of number by appending empty string
  101.     if (
  102.         // detect literal dot, slash, colon, and alphabetical characters in a regular expression group; presume four-digit input to be a year number.
  103.         //  To manually opt for the recognition of a four-digit value as an epoch time stamp, which is very unlikely to be necessary, a space character can be added before or after the input value.
  104.         // separate search for dash that starts after the first character of the input to prevent matching negative numbers
  105.         // The empty string "" is necessary to force the data type into "string" instead of "number" so the length can be measured.
  106.         // special case: first character in input is a dash, meaning the input is a negative number and should be recognized as epoch time stamp.
  107.         ( (""+input).search(/(\.|\/|\:|[A-Z]|[a-z])/) > -1 || (""+input).search("-") > 0 ) || ( (""+input).length == 4 && (""+input).search("-") != 0 )
  108.     ) {
  109.     return false; // probably no epoch time stamp
  110.     } else return true; // probably an epoch time stamp
  111. };
  112.  
  113.     // calculates the output date or time stamp
  114. epoch.convert = function() {
  115.     if (time_input.value == "") return false; // no calculation if the input box is empty
  116.  
  117.     if ( epoch.detect(time_input.value) ) /* epoch to date */ {
  118.         epoch.output_type = "Date and time";
  119.         epoch.output_text = new Date(time_input.value * 1000); // add three zeroes to convert seconds instead of milliseconds. Stored in standalone variable for the swap feature.
  120.         time_output.innerHTML = "<no_select>"+epoch.output_type+": </no_select>"+epoch.output_text;
  121.     } else  /* date to epoch */ {
  122.         epoch.output_type = "Epoch time stamp";
  123.         epoch.output_text = (new Date(time_input.value).getTime() / 1000 );
  124.         time_output.innerHTML = "<no_select>"+epoch.output_type+": </no_select>"+epoch.output_text; /* divide by 1000 to convert seconds instead of milliseconds */
  125.     }
  126.     time_input.setAttribute("value",time_input.value); // Update value in DOM (document object model) – might improve compatibility.
  127. };
  128.  
  129.  
  130. // for the "Swap" button
  131. epoch.swap = function() {
  132.     time_input.value = epoch.output_text;
  133.     epoch.convert();
  134. };
  135.  
  136. // for the "Now" button
  137. epoch.now = function() {
  138.     time_input.value = new Date();
  139.     epoch.convert();
  140. };
  141.  
  142. // for the "Clear" button
  143. epoch.clear = function() {
  144.     time_input.value = null;
  145.     time_output.innerHTML = null;
  146. };
  147.  
  148. // implements instant results after each key press
  149. epoch.keyup = function() {
  150.     time_input.defeat_hash_change = true; // prevent hash change from interfering with text area
  151.     epoch.convert();    // convert automatically on each key press inside the text box.
  152.     time_input.defeat_hash_change = false; // unlock hash change
  153. };
  154.  
  155. // implements "enter" button press for results and updating URL
  156. epoch.keypress = function() {
  157.     if (event.keyCode == 13) // Keycode 13 is for enter key, both main and on NUM pad.
  158.     {
  159.         epoch.convert(); // convert when pressing enter.
  160.         document.location.hash = time_input.value; // update URL
  161.     }
  162. };
  163.  
  164. // date calculation shortcut via pre-entered hash fragment (#) after URL
  165. if (document.location.hash) {
  166.     /* using decodeURIComponent to prevent spaces from turning into "%20" (hexadecimal percent-encoding) */
  167.     time_input.value = decodeURIComponent(document.location.hash.substring(1) );
  168.     epoch.convert();
  169. }
  170.  
  171. // detect change of value after "#" in URL
  172. window.onhashchange = function() {
  173.     if (!time_input.defeat_hash_change) {
  174.     /* Only run again if URL changed manually, not input box. */
  175.  
  176.         time_input.value = decodeURIComponent(document.location.hash.substring(1) );
  177.         epoch.convert();
  178.     }
  179. };
  180.  
  181. // pre-fill with current time if no time is specified in URL
  182. if (document.location.hash == "") epoch.now();
  183. </script>
  184.  
  185. </body>
  186.  
  187. </html>
Tags: html js Epoch
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!