{"id":6184,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=6184"},"modified":"2024-01-22T14:43:21","modified_gmt":"2024-01-22T09:43:21","slug":"javascript-analog-clock-source-code","status":"publish","type":"post","link":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/","title":{"rendered":"JavaScript Analog Clock Source Code"},"content":{"rendered":"

This JavaScript source code helps you to create an analog clock widget with smooth sweeping clock hands. It displays the time with long-form text labels for the hour and minute. The clock widget is purely built with CSS and Vanilla JavaScript without using SVG or images.<\/p>\n

You can use this analog clock widget to display day, date, and time on a news or magazine website. Similarly, it can also be used to indicate the time for a specific purpose like a Quiz page<\/a> or online exam interface to keep the students updated with time.<\/p>\n

How to Create JavaScript Analog Clock<\/h2>\n

1. In order to create an analog clock, create the HTML structure for the clock as follows:<\/p>\n

<div class=\"container\">\r\n    <div id=\"clock\">\r\n    <div class=\"dial\"><\/div>\r\n    <ul id=\"time-display\" class=\"display-text\">\r\n      <li id=\"hour-display\"><\/li>\r\n      <li id=\"minute-display\"><\/li>\r\n    <\/ul>\r\n    <ul id=\"calendar-display\" class=\"display-text\">\r\n      <li id=\"day-display\"><\/li>\r\n      <li id=\"month-display\"><\/li>\r\n      <li id=\"date-display\"><\/li>\r\n    <\/ul>\r\n    <div id=\"second-hand\" class=\"hand\">\r\n      <div class=\"ring\"><\/div>\r\n    <\/div>\r\n    <div id=\"minute-hand\" class=\"hand\"><\/div>\r\n    <div id=\"hour-hand\" class=\"hand\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
2. After that, style the clock widget using the following CSS styles. If you want to customize the clock interface, you can set the custom background, size (width & height), margin, and padding value.<\/p>\n
.container {\r\n    background: #7F00FF;  \/* fallback for old browsers *\/\r\n    background: -webkit-linear-gradient(to right, #E100FF, #7F00FF);  \/* Chrome 10-25, Safari 5.1-6 *\/\r\n    background: linear-gradient(to right, #E100FF, #7F00FF); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/\r\n    width: 100%;\r\n    min-height: 520px; \r\n    text-align: center;\r\n    padding: 50px;\r\n    box-sizing: border-box;\r\n}\r\n\r\n#clock {\r\n  position: relative;\r\n  grid-area: content;\r\n  width: 300px;\r\n  height: 300px;\r\n  border-radius: 50%;\r\n  border: double 10px #39454b;\r\n  background: linear-gradient(-45deg, #39454b 20%, #101017);\r\n  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);\r\n  margin: 10px auto;\r\n}\r\n\r\n.dial {\r\n  position: absolute;\r\n  top: calc(50% - 10px);\r\n  left: calc(50% - 10px);\r\n  width: 20px;\r\n  height: 20px;\r\n  box-sizing: border-box;\r\n  border-radius: 50%;\r\n  border: dotted 1px #101017;\r\n  background: #4c5c64;\r\n  z-index: 1;\r\n}\r\n\r\n\/* Clock hands *\/\r\n.hand {\r\n  position: absolute;\r\n  transform-origin: 0px center;\r\n  \/* Fix aliasing caused by transform: rotate() *\/\r\n  outline: 1px solid transparent;\r\n}\r\n\r\n#hour-hand {\r\n  \/* center hand *\/\r\n  top: calc(50% - 2px);\r\n  left: 50%;\r\n  width: 80px;\r\n  height: 2px;\r\n  border: 1px solid #fff;\r\n  border-radius: 3px;\r\n  background: #b7ddf0;\r\n  z-index: 2;\r\n}\r\n\r\n#minute-hand {\r\n  \/* center hand *\/\r\n  top: calc(50% - 2px);\r\n  left: 50%;\r\n  width: 120px;\r\n  height: 2px;\r\n  border: 1px solid #fff;\r\n  border-radius: 3px;\r\n  background: #b7ddf0;\r\n  z-index: 3;\r\n}\r\n\r\n#second-hand {\r\n  \/* center hand *\/\r\n  top: calc(50% - 1px);\r\n  left: 80px;\r\n  width: 200px;\r\n  height: 2px;\r\n  border-radius: 1px;\r\n  background: #b7ddf0;\r\n  transform-origin: 70px center;\r\n  z-index: 5;\r\n}\r\n\r\n#second-hand .ring {\r\n  width: 12px;\r\n  height: 10px;\r\n  margin-top: -5px;\r\n  margin-left: 15px;\r\n  background: transparent;\r\n  border: 1px solid #b7ddf0;\r\n  border-radius: 50%;\r\n  z-index: 11;\r\n}\r\n\r\n\/* Long form text displays *\/\r\n.display-text li {\r\n  list-style-type: none;\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-family: Arial, Helvetica, sans-serif;\r\n  text-transform: uppercase;\r\n  color: #fff;\r\n}\r\n\r\n#time-display {\r\n  position: absolute;\r\n  top: 25%;\r\n  left: calc(50% - 75px);\r\n  min-width: 150px;\r\n  margin: 0;\r\n  text-align: center;\r\n  transition: 1s ease-in;\r\n}\r\n\r\n#time-display li {\r\n  display: block;\r\n}\r\n\r\n#calendar-display {\r\n  position: absolute;\r\n  top: 75%;\r\n  left: calc(50% - 75px);\r\n  min-width: 150px;\r\n  margin: 0;\r\n  text-align: center;\r\n}\r\n\r\n#calendar-display li {\r\n  display: inline-block;\r\n}\r\n<\/pre>\n
3. Finally, add the following JavaScript source code between the <script> tag before closing the body tag in order to functionalize the analog clock.<\/p>\n
\/\/ Setters\r\nconst setTimeString = timeUnit => {\r\n  \/\/ String representations of time numbers\r\n  const timeStrings = {\r\n    0: \"\",\r\n    1: \"one\",\r\n    2: \"two\",\r\n    3: \"three\",\r\n    4: \"four\",\r\n    5: \"five\",\r\n    6: \"six\",\r\n    7: \"seven\",\r\n    8: \"eight\",\r\n    9: \"nine\",\r\n    10: \"ten\",\r\n    11: \"eleven\",\r\n    12: \"twelve\",\r\n    13: \"thirteen\",\r\n    14: \"fourteen\",\r\n    15: \"fifteen\",\r\n    16: \"sixteen\",\r\n    17: \"seventeen\",\r\n    18: \"eighteen\",\r\n    19: \"nineteen\",\r\n    20: \"twenty\",\r\n    30: \"thirty\",\r\n    40: \"fourty\",\r\n    50: \"fifty\",\r\n    60: \"sixty\" };\r\n\r\n\r\n  if (timeUnit < 20) {\r\n    return timeStrings[timeUnit];\r\n  } else {\r\n    const digitOne = timeStrings[Math.floor(timeUnit \/ 10) * 10];\r\n    const digitTwo = timeStrings[timeUnit % 10] ?\r\n    timeStrings[timeUnit % 10] :\r\n    0;\r\n    if (digitTwo !== 0) {\r\n      return `${digitOne} ${digitTwo}`;\r\n    } else {\r\n      return digitOne;\r\n    }\r\n  }\r\n};\r\n\r\n(function () {\r\n  \/\/ Getters\r\n  const getDomElements = () => {\r\n    const hourDisplay = document.getElementById(\"hour-display\");\r\n    const minuteDisplay = document.getElementById(\"minute-display\");\r\n    const dayDisplay = document.getElementById(\"day-display\");\r\n    const monthDisplay = document.getElementById(\"month-display\");\r\n    const dateDisplay = document.getElementById(\"date-display\");\r\n    const hourHand = document.getElementById(\"hour-hand\");\r\n    const minuteHand = document.getElementById(\"minute-hand\");\r\n    const secondHand = document.getElementById(\"second-hand\");\r\n\r\n    return {\r\n      hourDisplay,\r\n      minuteDisplay,\r\n      dayDisplay,\r\n      monthDisplay,\r\n      dateDisplay,\r\n      hourHand,\r\n      minuteHand,\r\n      secondHand };\r\n\r\n  };\r\n\r\n  const getCurrentTime = () => {\r\n    const date = new Date();\r\n    const time = date.getTime();\r\n    const hours = date.getHours();\r\n    const minutes = date.getMinutes();\r\n    const seconds = date.getSeconds();\r\n    const milliseconds = date.getMilliseconds();\r\n\r\n    return {\r\n      date,\r\n      time,\r\n      \/\/ Adjust hours to 12 hour clock\r\n      hours: hours > 12 ? hours - 12 : hours,\r\n      minutes,\r\n      seconds,\r\n      milliseconds };\r\n\r\n  };\r\n\r\n  const setDateDisplay = currentTime => {\r\n    const nowDateString = currentTime.toDateString();\r\n    const dayString = nowDateString.slice(0, 3);\r\n    const monthString = nowDateString.slice(4, 7);\r\n    const dateString = nowDateString.slice(8, 10);\r\n\r\n    return {\r\n      dayString,\r\n      monthString,\r\n      dateString };\r\n\r\n  };\r\n\r\n  \/\/ Rendering\r\n  const rotateHand = (timeUnit, factor, hand) => {\r\n    \/\/ -90 degress accomodates for initial css layout position\r\n    const position = timeUnit * factor - 90;\r\n    hand.style.transform = `rotate(${position}deg)`;\r\n  };\r\n\r\n  const renderClock = () => {\r\n    const domElements = getDomElements();\r\n    const currentTime = getCurrentTime();\r\n    \/\/ Hand values for animation\r\n    \/\/ Seconds, minutes, hours reflect 100ms setInterval() iteration\r\n    const seconds =\r\n    (currentTime.seconds * 1000 + currentTime.milliseconds) \/ 1000;\r\n    const minutes = (currentTime.minutes * 60 + seconds) \/ 60;\r\n    const hours = (currentTime.hours * 60 + minutes) \/ 60;\r\n\r\n    \/\/ Display strings for long-form readout\r\n    const hourString = setTimeString(currentTime.hours);\r\n    const minuteString = setTimeString(currentTime.minutes);\r\n    let { dayString, monthString, dateString } = setDateDisplay(\r\n    currentTime.date);\r\n\r\n\r\n    \/\/ Populate DOM Elements\r\n    domElements.hourDisplay.innerHTML = hourString;\r\n    domElements.minuteDisplay.innerHTML = minuteString;\r\n    domElements.dayDisplay.innerHTML = `${dayString} | `;\r\n    domElements.monthDisplay.innerHTML = `${monthString} | `;\r\n    domElements.dateDisplay.innerHTML = dateString;\r\n\r\n    \/\/ Rotate Hands\r\n    rotateHand(seconds, 6, domElements.secondHand);\r\n    rotateHand(minutes, 6, domElements.minuteHand);\r\n    rotateHand(hours, 30, domElements.hourHand);\r\n  };\r\n\r\n  const run = () => {\r\n    setInterval(() => {\r\n      renderClock();\r\n    }, 100);\r\n  };\r\n\r\n  run();\r\n})();\r\n<\/pre>\n
That’s all! hopefully, you have successfully integrated this analog clock widget into your project. If you have any questions or facing any issues, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript source code helps you to create an analog clock widget with smooth sweeping clock hands. It displays the…<\/p>\n","protected":false},"author":1,"featured_media":6265,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[58],"tags":[222,87],"class_list":["post-6184","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-date-time","tag-analog-clock","tag-analog-clocks"],"acf":[],"yoast_head":"\nJavaScript Analog Clock Source Code — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a complete JavaScript source code to create analog clock widget. You can view demo and download code snippet for analog clock.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Analog Clock Source Code — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a complete JavaScript source code to create analog clock widget. You can view demo and download code snippet for analog clock.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:43:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1178\" \/>\n\t<meta property=\"og:image:height\" content=\"884\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Analog Clock Source Code\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/\"},\"wordCount\":208,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png\",\"keywords\":[\"Analog Clock\",\"Analog Clocks\"],\"articleSection\":[\"Date & Time\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/\",\"url\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/\",\"name\":\"JavaScript Analog Clock Source Code — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:21+00:00\",\"description\":\"Here is a complete JavaScript source code to create analog clock widget. You can view demo and download code snippet for analog clock.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png\",\"width\":1178,\"height\":884,\"caption\":\"JavaScript Analog Clock Source Code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Date & Time\",\"item\":\"https:\/\/codehim.com\/category\/date-time\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Analog Clock Source Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Analog Clock Source Code — CodeHim","description":"Here is a complete JavaScript source code to create analog clock widget. You can view demo and download code snippet for analog clock.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Analog Clock Source Code — CodeHim","og_description":"Here is a complete JavaScript source code to create analog clock widget. You can view demo and download code snippet for analog clock.","og_url":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:43:21+00:00","og_image":[{"width":1178,"height":884,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Analog Clock Source Code","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:21+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/"},"wordCount":208,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png","keywords":["Analog Clock","Analog Clocks"],"articleSection":["Date & Time"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/","url":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/","name":"JavaScript Analog Clock Source Code — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:21+00:00","description":"Here is a complete JavaScript source code to create analog clock widget. You can view demo and download code snippet for analog clock.","breadcrumb":{"@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/javascript-analog-clock-source-code.png","width":1178,"height":884,"caption":"JavaScript Analog Clock Source Code"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/date-time\/javascript-analog-clock-source-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Date & Time","item":"https:\/\/codehim.com\/category\/date-time\/"},{"@type":"ListItem","position":3,"name":"JavaScript Analog Clock Source Code"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":5593,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=6184"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6184\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/6265"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=6184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=6184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=6184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}