API tools faq
paste
Advertisement
wartab

X/Y Clock sync

wartab
Oct 28th, 2019
456
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Clock</title>
  6.     <style type="text/css">
  7.         body {
  8.             font-family: "Helvetica Neue", Helvetica, sans-serif;
  9.         }
  10.         #clock {
  11.             background-color: #000000;
  12.             color: #ffffff;
  13.             font-size: 1em;
  14.             padding: 2em;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.  
  20. <div id="clock">
  21.     <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>
  22. </div>
  23.  
  24. <div>
  25.     <form>
  26.         <select id="hour-selector">
  27.             <option value="0">00</option>
  28.             <option value="1">01</option>
  29.             <option value="2">02</option>
  30.             <option value="3">03</option>
  31.             <option value="4">04</option>
  32.             <option value="5">05</option>
  33.             <option value="6">06</option>
  34.             <option value="7">07</option>
  35.             <option value="8">08</option>
  36.             <option value="9">09</option>
  37.             <option value="10">10</option>
  38.             <option value="11">11</option>
  39.             <option value="12">12</option>
  40.             <option value="13">13</option>
  41.             <option value="14">14</option>
  42.             <option value="15">15</option>
  43.             <option value="16">16</option>
  44.             <option value="17">17</option>
  45.             <option value="18">18</option>
  46.             <option value="19">19</option>
  47.             <option value="20">20</option>
  48.             <option value="21">21</option>
  49.             <option value="22">22</option>
  50.             <option value="23">23</option>
  51.         </select> : <select id="minute-selector">
  52.         <option value="0">00</option>
  53.         <option value="1">01</option>
  54.         <option value="2">02</option>
  55.         <option value="3">03</option>
  56.         <option value="4">04</option>
  57.         <option value="5">05</option>
  58.         <option value="6">06</option>
  59.         <option value="7">07</option>
  60.         <option value="8">08</option>
  61.         <option value="9">09</option>
  62.         <option value="10">10</option>
  63.         <option value="11">11</option>
  64.         <option value="12">12</option>
  65.         <option value="13">13</option>
  66.         <option value="14">14</option>
  67.         <option value="15">15</option>
  68.         <option value="16">16</option>
  69.         <option value="17">17</option>
  70.         <option value="18">18</option>
  71.         <option value="19">19</option>
  72.         <option value="20">20</option>
  73.         <option value="21">21</option>
  74.         <option value="22">22</option>
  75.         <option value="23">23</option>
  76.         <option value="24">24</option>
  77.         <option value="25">25</option>
  78.         <option value="26">26</option>
  79.         <option value="27">27</option>
  80.         <option value="28">28</option>
  81.         <option value="29">29</option>
  82.         <option value="30">30</option>
  83.         <option value="31">31</option>
  84.         <option value="32">32</option>
  85.         <option value="33">33</option>
  86.         <option value="34">34</option>
  87.         <option value="35">35</option>
  88.         <option value="36">36</option>
  89.         <option value="37">37</option>
  90.         <option value="38">38</option>
  91.         <option value="39">39</option>
  92.         <option value="40">40</option>
  93.         <option value="41">41</option>
  94.         <option value="42">42</option>
  95.         <option value="43">43</option>
  96.         <option value="44">44</option>
  97.         <option value="45">45</option>
  98.         <option value="46">46</option>
  99.         <option value="47">47</option>
  100.         <option value="48">48</option>
  101.         <option value="49">49</option>
  102.         <option value="50">50</option>
  103.         <option value="51">51</option>
  104.         <option value="52">52</option>
  105.         <option value="53">53</option>
  106.         <option value="54">54</option>
  107.         <option value="55">55</option>
  108.         <option value="56">56</option>
  109.         <option value="57">57</option>
  110.         <option value="58">58</option>
  111.         <option value="59">59</option>
  112.     </select> : <select id="second-selector">
  113.         <option value="0">00</option>
  114.         <option value="1">01</option>
  115.         <option value="2">02</option>
  116.         <option value="3">03</option>
  117.         <option value="4">04</option>
  118.         <option value="5">05</option>
  119.         <option value="6">06</option>
  120.         <option value="7">07</option>
  121.         <option value="8">08</option>
  122.         <option value="9">09</option>
  123.         <option value="10">10</option>
  124.         <option value="11">11</option>
  125.         <option value="12">12</option>
  126.         <option value="13">13</option>
  127.         <option value="14">14</option>
  128.         <option value="15">15</option>
  129.         <option value="16">16</option>
  130.         <option value="17">17</option>
  131.         <option value="18">18</option>
  132.         <option value="19">19</option>
  133.         <option value="20">20</option>
  134.         <option value="21">21</option>
  135.         <option value="22">22</option>
  136.         <option value="23">23</option>
  137.         <option value="24">24</option>
  138.         <option value="25">25</option>
  139.         <option value="26">26</option>
  140.         <option value="27">27</option>
  141.         <option value="28">28</option>
  142.         <option value="29">29</option>
  143.         <option value="30">30</option>
  144.         <option value="31">31</option>
  145.         <option value="32">32</option>
  146.         <option value="33">33</option>
  147.         <option value="34">34</option>
  148.         <option value="35">35</option>
  149.         <option value="36">36</option>
  150.         <option value="37">37</option>
  151.         <option value="38">38</option>
  152.         <option value="39">39</option>
  153.         <option value="40">40</option>
  154.         <option value="41">41</option>
  155.         <option value="42">42</option>
  156.         <option value="43">43</option>
  157.         <option value="44">44</option>
  158.         <option value="45">45</option>
  159.         <option value="46">46</option>
  160.         <option value="47">47</option>
  161.         <option value="48">48</option>
  162.         <option value="49">49</option>
  163.         <option value="50">50</option>
  164.         <option value="51">51</option>
  165.         <option value="52">52</option>
  166.         <option value="53">53</option>
  167.         <option value="54">54</option>
  168.         <option value="55">55</option>
  169.         <option value="56">56</option>
  170.         <option value="57">57</option>
  171.         <option value="58">58</option>
  172.         <option value="59">59</option>
  173.     </select>
  174.         <button type="submit">Set time</button>
  175.     </form>
  176.  
  177. </div>
  178.  
  179. <script type="text/javascript">
  180. (() => {
  181.  
  182.     let $form = document.querySelector("form");
  183.     let $hourSelector = document.querySelector("#hour-selector");
  184.     let $minuteSelector = document.querySelector("#minute-selector");
  185.     let $secondSelector = document.querySelector("#second-selector");
  186.     let $hour = document.querySelector("#hour");
  187.     let $minute = document.querySelector("#minute");
  188.     let $second = document.querySelector("#second");
  189.  
  190.  
  191.     let displayedTime = {
  192.         hour: 23,
  193.         minute: 3,
  194.         second: 0,
  195.     };
  196.  
  197.     let lastDifference = 0;
  198.  
  199.     let startTime = new Date().getTime();
  200.  
  201.     let displayHour = () => {
  202.         let hourText = displayedTime.hour;
  203.         if (hourText < 10) {
  204.            hourText = "0" + hourText;
  205.        }
  206.        $hour.textContent = hourText;
  207.    };
  208.  
  209.    let displayMinute = () => {
  210.         let minuteText = displayedTime.minute;
  211.         if (minuteText < 10) {
  212.            minuteText = "0" + minuteText;
  213.        }
  214.        $minute.textContent = minuteText;
  215.    };
  216.  
  217.    let displaySecond = () => {
  218.         let secondText = displayedTime.second;
  219.         if (secondText < 10) {
  220.            secondText = "0" + secondText;
  221.        }
  222.        $second.textContent = secondText;
  223.    };
  224.  
  225.    let updateTimer = () => {
  226.         let time = new Date().getTime();
  227.  
  228.         let difference = time - startTime;
  229.  
  230.         difference -= difference % 1000;
  231.  
  232.         difference /= 1000;
  233.  
  234.         if (lastDifference === difference) {
  235.             return;
  236.         }
  237.  
  238.         let toAddSeconds = difference - lastDifference;
  239.         let toAddMinutes = 0;
  240.         let toAddHours = 0;
  241.  
  242.         let newSecond = displayedTime.second + toAddSeconds;
  243.         while (newSecond > 59) {
  244.             newSecond-= 60;
  245.             ++toAddMinutes;
  246.         }
  247.  
  248.         if (newSecond !== displayedTime.second) {
  249.             displayedTime.second = newSecond;
  250.             displaySecond();
  251.         }
  252.  
  253.         let newMinute = displayedTime.minute + toAddMinutes;
  254.         while (newMinute > 59) {
  255.             newMinute-= 60;
  256.             ++toAddHours;
  257.         }
  258.  
  259.         if (newMinute !== displayedTime.minute) {
  260.             displayedTime.minute = newMinute;
  261.             displayMinute();
  262.         }
  263.  
  264.         let newHour = displayedTime.hour + toAddHours;
  265.         while (newHour > 23) {
  266.             newHour-= 24;
  267.         }
  268.  
  269.         if (newHour !== displayedTime.hour) {
  270.             displayedTime.hour = newHour;
  271.             displayHour();
  272.         }
  273.  
  274.         lastDifference = difference;
  275.     };
  276.  
  277.  
  278.     let configString = localStorage.getItem("config");
  279.     let config = {
  280.         hour: 23,
  281.         minute: 3,
  282.         second: 0,
  283.     };
  284.  
  285.     if (configString) {
  286.         config = JSON.parse(configString);
  287.     }
  288.  
  289.     displayedTime.hour = config.hour;
  290.     displayedTime.minute = config.minute;
  291.     displayedTime.second = config.second;
  292.  
  293.  
  294.     $hourSelector.value = config.hour.toString();
  295.     $minuteSelector.value = config.minute.toString();
  296.     $secondSelector.value = config.second.toString();
  297.  
  298.     displayHour();
  299.     displayMinute();
  300.     displaySecond();
  301.  
  302.     setInterval(updateTimer, 50);
  303.  
  304.  
  305.     $form.addEventListener("submit", e => {
  306.         e.preventDefault();
  307.  
  308.         config.hour = parseInt($hourSelector.value, 10);
  309.         config.minute = parseInt($minuteSelector.value, 10);
  310.         config.second = parseInt($secondSelector.value, 10);
  311.  
  312.         localStorage.setItem("config", JSON.stringify(config));
  313.         startTime = new Date().getTime();
  314.         lastDifference = 0;
  315.  
  316.         displayedTime.hour = config.hour;
  317.         displayedTime.minute = config.minute;
  318.         displayedTime.second = config.second;
  319.  
  320.         displayHour();
  321.         displayMinute();
  322.         displaySecond();
  323.     }, false);
  324.  
  325. })();
  326.  
  327. </script>
  328. </body>
  329. </html>
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!