Hello Webflow People,
Im trying to add a very basic digital clock to my site. I’d also like to add the date, which I assume will be similar code.
This is an example of what I’m looking to achieve.:
https://www.simonmerz.com/
This is my site:
https://phibsboro-press.webflow.io/
I’ve added some custom code and its working well but I’d like to add the date and style the text. Im sure its quite simple but I can’t code and Im surprised I’ve got this far.
Thanks in advance
Eamonn
Here’s some custom code you can embed where you would like to show it.
<div id="clock" class="design-clock"></div>
<script>
function currentTime() {
var date = new Date(); /* creating object of Date class */
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var day = date.toISOString().split('T')[0];
hour = updateTime(hour);
min = updateTime(min);
sec = updateTime(sec);
document.getElementById("clock").innerHTML = day + '<br>' + hour + " : " + min + " : " + sec; /* adding time to the div */
var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}
currentTime(); /* calling currentTime() function to initiate the process */
</script>
I hope this helps.
Works like a charm but just to note - everything inside the #clock div will be overwritten.
Thanks Eli,
That has added the date but I’d rather it in this format if possible:
Thursday 26th March, 19:45pm
I’d also like to style the text. Can you please advise on this element?
Thanks for your help
Here you go.
<div id="clock" class="design-clock"></div>
<script>
window.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
window.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
function nthFormatter(d) {
if (d > 3 && d < 21) return 'th';
switch (d % 10) {
case 1: return "st";
case 2: return "nd";
case 3: return "rd";
default: return "th";
}
}
function currentTime() {
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
if (min < 10)
min = "0" + min;
var ampm = hour >= 12 ? 'pm' : 'am';
var dayOfWeek = window.days[date.getDay()];
var month = window.months[date.getMonth()];
var day = date.getDate();
day += nthFormatter(day);
document.getElementById("clock").innerText = dayOfWeek + ' ' + day + ' ' + month + ', ' + hour + ':' + min + ampm;
/* setting timer to every 15 seconds */
var t = setTimeout(function () { currentTime() }, 15000);
}
currentTime();
</script>
If you want to design the text, give the html embed a class name design-clock and take it the way you want 
To add it would be better to style the parent div (the #clock div) as this would allow to paste a text inside it and actually see how it looks. Also there is no need to mention .design-clock at all in the code and even use this class anywhere, the id is enough
Thats amazing Eli, works perfectly thanks
I think I preferred it with the seconds, would it be too much to ask for some final code in this format:
Thursday 26th March, 19:45:55
Thanks in advance 
I thought in order to style it in Webflow you have to give it a class 
Yes, but there is no need to use this in the custom code, that is all.
You’re absolutely right
Here you go:
<div id="clock"></div>
<script>
window.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
window.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
function nthFormatter(d) {
if (d > 3 && d < 21) return 'th';
switch (d % 10) {
case 1: return "st";
case 2: return "nd";
case 3: return "rd";
default: return "th";
}
}
function currentTime() {
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
if (min < 10)
min = "0" + min;
var sec = date.getSeconds();
if (sec < 10)
sec = "0" + sec;
var ampm = hour >= 12 ? 'pm' : 'am';
var dayOfWeek = window.days[date.getDay()];
var month = window.months[date.getMonth()];
var day = date.getDate();
day += nthFormatter(day);
document.getElementById("clock").innerText = dayOfWeek + ' ' + day + ' ' + month + ', ' + hour + ':' + min + ':' + sec + ampm;
var t = setTimeout(function () { currentTime() }, 1000);
}
currentTime();
</script>
Aaand there is no need to even mention div in that script at all 
So just create regular div inside designer, give it an ID of #clock and inside of that insert the embed with the script (for ease of reusing this particular clock snippet)
Just being pedantic, haha
You’re good!
Thank you.
Thanks Eli, you’re a genius!
Thank you for these answers, they work great!
Could you tell me what the source is for the time. I’m assuming it’s the time set on the users computer? (since JS is client-side)
Basically what I would like to have is a clock above each of our locations showing the local time there. But that would be accurate regardless of where in the world it is accessed from.
Is this possible?
That’s correct. User time.
If you want to display time based on timezone you just use UTC time with an offset. If you need to deal with other offsets used in different areas of the world it is best to use a library and database. Something like day.js.org.
Thank you for the response! This is purely decorative so it’s not absolutely critical if there are some edge cases where it’s wrong.
So I guess I’m wondering, is it possible to get UTC from a users computer? i.e. assuming the user has the time set correctly on their machine, and has set the correct timezone too, is there a way for the site to then work out UTC? So I could pull both british summer time and pacific time out once it’s established UTC.
So I imagine something like this: User in new york, her time is 3:00pm. The site knows that she is in new york which is utc -5 so it’s able to add 5 to get UTC which is 8pm. The site then can subtract 8 hours, to get pacific time 12noon, and display UTC, 8pm, for UK.
Although this seems like it’s going to get an order of magnitude more complicated when adding the different daylight savings times in? Not worth it for a decorative footer addition I assume?
Thank you for the help so far 
Hey Jeff!
I’m super very new to JavaScript and all of these beautiful languages…
I’ve input var hour = date.getUTCHours(); and have gotten the UTC time… however I can’t seem to nail down this offset… I’m in Lisbon PT so I believe there is a specific timezone for us to write in.
I’m just lost in the sauce.
var hour = date.getHours(); will give the local time.
A huge thanks for this discussion. As a newbie I was very interesting to read, thanks.