SHARE
TWEET

Aha

a guest Sep 16th, 2019 103 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2.     .container-clock {
  3.         display: none;
  4.         position: absolute;
  5.         top: 400px;
  6.         left: 120px;
  7.     }
  8. .clock {
  9.   height: 10vh;
  10.   color: white;
  11.   font-size: 10vh;
  12.   font-family: sans-serif;
  13.   line-height: 10vh;
  14.   display: flex;
  15.   position: relative;
  16.   /*background: green;*/
  17.   overflow: hidden;
  18. }
  19.  
  20. .clock::before, .clock::after {
  21.   content: '';
  22.   width: 7ch;
  23.   height: 3vh;
  24.   /*background: linear-gradient(to top, transparent, black);*/
  25.   position: absolute;
  26.   z-index: 2;
  27. }
  28.  
  29. .clock::after {
  30.   bottom: 0;
  31.   /*background: linear-gradient(to bottom, transparent, black);*/
  32. }
  33.  
  34. .clock > div {
  35.   display: flex;
  36. }
  37.  
  38. .tick {
  39.   line-height: 17vh;
  40. }
  41.  
  42. .tick-hidden {
  43.   opacity: 0;
  44. }
  45.  
  46. .move {
  47.   animation: move linear 1s infinite;
  48. }
  49.  
  50. @keyframes move {
  51.   from {
  52.     transform: translateY(0vh);
  53.   }
  54.   to {
  55.     transform: translateY(-20vh);
  56.   }
  57. }
  58.  
  59.  
  60. </style>
  61. <div class="container-clock">
  62.     <div class="clock">
  63.         <div class="hours">
  64.             <div class="first">
  65.                 <div class="number">0</div>
  66.             </div>
  67.             <div class="second">
  68.                 <div class="number">0</div>
  69.             </div>
  70.         </div>
  71.         <div class="tick">:</div>
  72.         <div class="minutes">
  73.             <div class="first">
  74.                 <div class="number">0</div>
  75.             </div>
  76.             <div class="second">
  77.                 <div class="number">0</div>
  78.             </div>
  79.         </div>
  80.         <div class="tick">:</div>
  81.         <div class="seconds">
  82.             <div class="first">
  83.                 <div class="number">0</div>
  84.             </div>
  85.             <div class="second infinite">
  86.                 <div class="number">0</div>
  87.             </div>
  88.         </div>
  89.     </div>
  90. </div>
  91.  
  92. <script type="text/javascript">
  93.  
  94.     $(function()
  95.     {
  96.  
  97.  
  98.         $("span#clock_tick").clock({ "calendar": false, "timeFormat":"h:i:s"});
  99.     });
  100. </script>
  101. <script>
  102.     var hoursContainer = document.querySelector('.hours')
  103.     var minutesContainer = document.querySelector('.minutes')
  104.     var secondsContainer = document.querySelector('.seconds')
  105.     var tickElements = Array.from(document.querySelectorAll('.tick'))
  106.  
  107.     var last = new Date(0)
  108.     last.setUTCHours(-1)
  109.  
  110.     var tickState = true
  111.  
  112.     function updateTime() {
  113.         var now = new Date
  114.  
  115.         var lastHours = last.getHours().toString()
  116.         var nowHours = now.getHours().toString()
  117.         if (lastHours !== nowHours) {
  118.             updateContainer(hoursContainer, nowHours)
  119.         }
  120.  
  121.         var lastMinutes = last.getMinutes().toString()
  122.         var nowMinutes = now.getMinutes().toString()
  123.         if (lastMinutes !== nowMinutes) {
  124.             updateContainer(minutesContainer, nowMinutes)
  125.         }
  126.  
  127.         var lastSeconds = last.getSeconds().toString()
  128.         var nowSeconds = now.getSeconds().toString()
  129.         if (lastSeconds !== nowSeconds) {
  130.             //tick()
  131.             updateContainer(secondsContainer, nowSeconds)
  132.         }
  133.  
  134.         last = now
  135.     }
  136.  
  137.     function tick() {
  138.         tickElements.forEach(t => t.classList.toggle('tick-hidden'))
  139.     }
  140.  
  141.     function updateContainer(container, newTime) {
  142.         var time = newTime.split('')
  143.  
  144.         if (time.length === 1) {
  145.             time.unshift('0')
  146.         }
  147.  
  148.  
  149.         var first = container.firstElementChild
  150.         if (first.lastElementChild.textContent !== time[0]) {
  151.             updateNumber(first, time[0])
  152.         }
  153.  
  154.         var last = container.lastElementChild
  155.         if (last.lastElementChild.textContent !== time[1]) {
  156.             updateNumber(last, time[1])
  157.         }
  158.     }
  159.  
  160.     function updateNumber(element, number) {
  161.         //element.lastElementChild.textContent = number
  162.         var second = element.lastElementChild.cloneNode(true)
  163.         second.textContent = number
  164.  
  165.         element.appendChild(second)
  166.         element.classList.add('move')
  167.  
  168.         setTimeout(function () {
  169.             element.classList.remove('move')
  170.         }, 990)
  171.         setTimeout(function () {
  172.             element.removeChild(element.firstElementChild)
  173.         }, 990)
  174.     }
  175.  
  176.     //setInterval(updateTime, 100);
  177. </script>
  178.     </div>
  179.  
  180.     <div class="container" style="font-size: 0.8em; color: #999;">
  181.         <p>
  182.             This site is protected by reCAPTCHA and the Google
  183.             <a href="https://policies.google.com/privacy">Privacy Policy</a> and
  184.             <a href="https://policies.google.com/terms">Terms of Service</a> apply.
  185.         </p>
  186.     </div>
  187.  
  188.     <script>
  189.         $(function () {
  190.             grecaptcha.ready(function () {
  191.                 grecaptcha.execute('6LeFXaIUAAAAAP-Zd-hgWPx_TaxGLMsMbZjIJTvd', { action: 'redeem' }).then(function (token) {
  192.                     console.log("token: ", token);
  193.                 });
  194.             });
  195.         });
  196.     </script>
  197.  
  198.     <!-- Global site tag (gtag.js) - Google Analytics -->
  199.     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83926611-3"></script>
  200.     <script>
  201.         window.dataLayer = window.dataLayer || [];
  202.         function gtag() { dataLayer.push(arguments); }
  203.         gtag('js', new Date());
  204.  
  205.         gtag('config', 'UA-83926611-3');
  206.     </script>
  207.  
  208. </body>
  209. </html>
RAW Paste Data
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!
 
Top