Having a live clock shown on your website can be useful for two reasons. The first reason is when have a time-sensitive promotion on your website and want users to know what your server time is and the second is when your website has a dashboard and you might want to show off the time on the page for better UX.
This simple tutorial will enable you to add a live clock showing your server time on your website using both PHP and JS.
Things you will need:
- Access to cPanel/Direct Admin
- Basic HTML and CSS knowledge
- A backup of your website before making any changes (why?)
Steps to add your server time to your website:
1. Go to your cPanel (usually https://yoursite.com:2083) and add a new file named server-time.php inside your public_html (root) folder, and then add the following code inside this file:
<?php
header('Content-Type: application/json');
echo json_encode(['time' => date('Y-m-d H:i:s')]);
?>2. On the same folder, create a JS file named clock.js and inside this file, copy and past the following code:
let serverTimeOffset;
function updateClock() {
const now = new Date();
const serverTime = new Date(now.getTime() + serverTimeOffset);
document.getElementById('server-time').textContent = serverTime.toLocaleString();
}
function fetchServerTime() {
fetch('/server-time.php')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const serverTime = new Date(data.time);
const now = new Date();
serverTimeOffset = serverTime.getTime() - now.getTime();
updateClock();
setInterval(updateClock, 1000);
})
.catch(error => console.error('Error fetching server time:', error));
}
// Initial call to fetch the server time
fetchServerTime();3. Now, it’s time to update your HTML file. I’ll assume that you have no other content on your page and only want to show your server time on this page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Time</title>
</head>
<body>
<h1>Server Time</h1>
<p id="server-time"></p>
<script src="clock.js"></script>
</body>
</html>On the above code, regardless of what content is on your page, the <script> should follow the html tag with the ID server-time.
Optional: You can add a class to your <p> tag and add any CSS styling to it as you wish.
OK, on this blog post, I showed the simplest way to show your server time on your website on any page. If you want to show the clock on multiple pages, just add the <p> (or div with the same ID) and <script> to that page. As an alternative, you can show this code on any file that your website pages share (like header.php or footer.php).
Create a page only to promote on TEs. Read here for more information.
If you have any questions, please feel free to ask in the comments section below.
Manolo
Lovely and short at the same time. Just to the point; what I needed.
George Brown
Good post, been looking for this for a while now.