{"id":1026,"date":"2019-07-20T18:47:22","date_gmt":"2019-07-21T01:47:22","guid":{"rendered":"https:\/\/doubleecpu.com\/?page_id=1026"},"modified":"2019-07-22T13:00:29","modified_gmt":"2019-07-22T20:00:29","slug":"mycssclock","status":"publish","type":"page","link":"https:\/\/doubleecpu.com\/index.php\/raspian-linux-programs\/javascript-2\/myjs30\/mycssclock\/","title":{"rendered":"myCSSclock"},"content":{"rendered":"\n<div class=\"clock\" style=\"height: 40vmax;width: 40vmax\">\n      <div class=\"clock-face\" style=\"height: 41vmax;width: 35vmax\">\n        <div class=\"hour hour-hand\"><\/div>\n        <div class=\"min min-hand\"><\/div>\n        <div class=\"sec second-hand\"><\/div>\n      <\/div>\n    <\/div>\n  <style>\n    .clock {\n      background: url(https:\/\/doubleecpu.com\/wp-content\/uploads\/2018\/11\/G.png?_t=1543550618);\n      background-repeat: no-repeat;\n      background-size:97% 100%;\n      border: 10px solid white;\n      border-radius: 50%;\n      margin: auto auto;\n      position: relative;\n      padding: 2rem;\n      box-shadow:\n        0 0 0 4px rgba(0,0,0,0.1),\n        inset 0 0 0 3px #EFEFEF,\n        inset 0 0 10px black,\n        0 0 10px rgba(0,0,0,0.2);\n    }\n    .clock-face {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      \/* transform: translateY(-3px);  account for the height of the clock hands *\/\n    }\n    .hour {\n      width: 50%;\n      height: 6px;\n      background: gold;\n      position: relative;\n      top: 44%;\n      transform-origin: 100%;\n      transform: rotate(90deg);\n      transition: all 0.05s;\n      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);\n    }\n    .min {\n      width: 50%;\n      height: 2px;\n      background: gold;\n      position: relative;\n      top: 44%;\n      transform-origin: 100%;\n      transform: rotate(90deg);\n      transition: all 0.05s;\n      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);\n    }\n    .sec{\n      width: 50%;\n      height: 2px;\n      background: red;\n      position: relative;\n      top: 44%;\n      transform-origin: 100%;\n      transform: rotate(90deg);\n      transition: all 0.05s;\n      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);\n    }\n  }\n<\/style>\n\n<script>\n  const secondHand = document.querySelector('.second-hand');\n  const minsHand = document.querySelector('.min-hand');\n  const hourHand = document.querySelector('.hour-hand');\n  function setDate() {\n    const now = new Date();\n    const seconds = now.getSeconds();\n    const secondsDegrees = ((seconds \/ 60) * 360) + 90;\n    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;\n    const mins = now.getMinutes();\n    const minsDegrees = ((mins \/ 60) * 360) + ((seconds\/60)*6) + 90;\n    minsHand.style.transform = `rotate(${minsDegrees}deg)`;\n    const hour = now.getHours();\n    const hourDegrees = ((hour \/ 12) * 360) + ((mins\/60)*30) + 90;\n    hourHand.style.transform = `rotate(${hourDegrees}deg)`;\n  }\n  setInterval(setDate, 1000);\n  setDate();\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":1022,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1026","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/comments?post=1026"}],"version-history":[{"count":0,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1026\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1022"}],"wp:attachment":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/media?parent=1026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}