{"id":4007,"date":"2023-12-10T21:47:17","date_gmt":"2023-12-10T14:47:17","guid":{"rendered":"https:\/\/www.phanxuanchanh.com\/2023\/12\/10\/create-a-digital-clock-for-a-website-using-html-css-and-javascript\/"},"modified":"2024-03-08T16:46:22","modified_gmt":"2024-03-08T09:46:22","slug":"create-a-digital-clock-for-a-website-using-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/www.phanxuanchanh.com\/en\/2023\/12\/10\/create-a-digital-clock-for-a-website-using-html-css-and-javascript\/","title":{"rendered":"Create a digital clock for a website using HTML, CSS, and JavaScript"},"content":{"rendered":"\n<p>In this article, I&#8217;ll share HTML, CSS, and JavaScript code to display time and date on your website.<\/p>\n\n<p>First, you need to add the following CSS and JavaScript code to your website.<\/p>\n\n<p>CSS code:<\/p>\n\n<pre class=\"wp-block-code language-html\"><code>&lt;style>\r\n    .datetime-display {\r\n        text-align: center;\r\n        border: 3px solid burlywood;\r\n    }\r\n\r\n    #time {\r\n        font-weight: 400;\r\n        display: block;\r\n        font-size: 30px;\r\n        margin: 0 0 5px;\r\n        letter-spacing: 5px;\r\n    }\r\n&lt;\/style><\/code><\/pre>\n\n<p>Javascript code:<\/p>\n\n<pre class=\"wp-block-code language-html\"><code>&lt;script type=\"text\/javascript\">\r\n    var date = new Date();\r\n    if (date.getTimezoneOffset() == 0)\r\n        time = date.getTime() + (7 * 60 * 60 * 1000);\r\n    else\r\n        time = date.getTime();\r\n    date.setTime(time);\r\n\r\n    var days = new Array('Ch\u1ee7 nh\u1eadt', 'Th\u1ee9 2', 'Th\u1ee9 3', 'Th\u1ee9 4', 'Th\u1ee9 5', 'Th\u1ee9 6', 'Th\u1ee9 7');\r\n    day = date.getDay();\r\n    month = date.getMonth() + 1;\r\n    year = date.getFullYear();\r\n    document.getElementById('day-and-date').innerText = days&#91;day] + ', ' + (date.getDate() &lt; 10 ? '0' : '') + date.getDate() + '\/' + (month &lt; 10 ? '0' : '') + month + '\/' + year;\r\n\r\n    var timeElement = document.getElementById('time');\r\n    var updateTimeInterval = setInterval(function () {\r\n        updateClock();\r\n    }, 1000);\r\n\r\n    function updateClock() {\r\n        if (timeElement) {\r\n            var newDate = new Date();\r\n            var localeTimeString = newDate.toLocaleTimeString();\r\n            timeElement.innerHTML = localeTimeString;\r\n        } else {\r\n            clearInterval(updateTimeInterval);\r\n        }\r\n    }\r\n&lt;\/script><\/code><\/pre>\n\n<p>Finally, add the following HTML code to where you want it to be displayed.<\/p>\n\n<pre class=\"wp-block-code language-html\"><code>&lt;div class=\"datetime-display\">\n    &lt;span id=\"day-and-date\">&lt;\/span>\n    &lt;span id=\"time\">&lt;\/span>\n&lt;\/div><\/code><\/pre>\n\n<p><strong>Run source code<\/strong><\/p>\n\n<style>\n    .datetime-display {\n        text-align: center;\n        border: 3px solid burlywood;\n    }\n\n    #time {\n        font-weight: 400;\n        display: block;\n        font-size: 30px;\n        margin: 0 0 5px;\n        letter-spacing: 5px;\n    }\n<\/style>\n\n<script type=\"text\/javascript\">\n    var date = new Date();\n    if (date.getTimezoneOffset() == 0)\n        time = date.getTime() + (7 * 60 * 60 * 1000);\n    else\n        time = date.getTime();\n    date.setTime(time);\n\n    var days = new Array('Ch\u1ee7 nh\u1eadt', 'Th\u1ee9 2', 'Th\u1ee9 3', 'Th\u1ee9 4', 'Th\u1ee9 5', 'Th\u1ee9 6', 'Th\u1ee9 7');\n    day = date.getDay();\n    month = date.getMonth() + 1;\n    year = date.getFullYear();\n    document.getElementById('day-and-date').innerText = days[day] + ', ' + (date.getDate() <10 ? '0' : '') + date.getDate() + '\/' + (month <10 ? '0' : '') + month + '\/' + year; var timeElement = document.getElementById('time'); var updateTimeInterval = setInterval(function () { updateClock(); }, 1000); function updateClock() { if (timeElement) { var newDate = new Date(); var localeTimeString = newDate.toLocaleTimeString(); timeElement.innerHTML = localeTimeString; } else { clearInterval(updateTimeInterval); } } <\/script>\n\n<div class=\"datetime-display\">\n    <span id=\"day-and-date\"><\/span>\n    <span id=\"time\"><\/span>\n<\/div>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.buymeacoffee.com\/1.0.0\/button.prod.min.js\" data-name=\"bmc-button\" data-slug=\"phanxuanchanh\" data-color=\"#FFDD00\" data-emoji=\"\" data-font=\"Arial\" data-text=\"T\u1eb7ng t\u00f4i m\u1ed9t ly c\u00e0 ph\u00ea\" data-outline-color=\"#000000\" data-font-color=\"#000000\" data-coffee-color=\"#ffffff\" ><\/script>","protected":false},"excerpt":{"rendered":"<p>In this article, I&#8217;ll share HTML, CSS, and JavaScript code to display time and date on your website. First, you need to add the following&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3238,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[600],"tags":[632,631,630],"quality_rating":[680],"class_list":["post-4007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-css-en","tag-html-en","tag-javascript-en","quality_rating-ok"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.phanxuanchanh.com\/wp-content\/uploads\/2020\/10\/cafedev_javascript.png?fit=960%2C576&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/posts\/4007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/comments?post=4007"}],"version-history":[{"count":3,"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/posts\/4007\/revisions"}],"predecessor-version":[{"id":4010,"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/posts\/4007\/revisions\/4010"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/media\/3238"}],"wp:attachment":[{"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/media?parent=4007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/categories?post=4007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/tags?post=4007"},{"taxonomy":"quality_rating","embeddable":true,"href":"https:\/\/www.phanxuanchanh.com\/en\/wp-json\/wp\/v2\/quality_rating?post=4007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}