Time display

Custom code
1

Hello all!

I would like to display user local time like this " “hh : mm : ss” on my contact page.
I saw many possibilities for how to do that, but I am not sure how I could implement it on Readymag.

Has anybody ever done it?

best,

2

Hello @Cyrill_Durigon there are a couple of options to do this. I have linked to a Codepen that has some easy to understand JS. I have linked it here as inline HTML for embedding.


<div id="MyClockDisplay" class="clock" onload="showTime()"></div>

<style>
    body {
    background: black;
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #17D4FE;
    font-size: 60px;
    font-family: Orbitron;
    letter-spacing: 7px;
}
</style>

<script>
    function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;
        session = "PM";
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();
</script>
3

@fmc I saw you were also looking for a solution to this. :slight_smile:

4

Thank you !

It works, I even found a way to display only a specific time zone :wink:

Check it out :

1 Like
5

Nice! Codepen is a great resource for anyone looking to add some extra coded elements to their site but don’t know where to begin.

1 Like
6

Thanks guys this is great, just used it. Any idea on the code to display the date as well?

7

Hi @mr.wren Not for this particular Codepen I linked. I would suggest using this one that uses MomentJS just as it’s much better with handling dates and timezones! I’ve attached a link here and some quick code to get you started.

https://momentjs.com

<div id="clock"></div>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/moment.js"></script>

<script>
function update() {
  $('#clock').html(moment().format('D. MMMM YYYY H:mm:ss'));
}
  
setInterval(update, 1000);
</script>
1 Like
8

Ace! Thanks very much

9

Hey, so I launched the site but there seems to be a bug with the clock in that you have to refresh the page in order for it to become visible. Any ideas? Thanks, much appreciated, I’m lost ; )

10

Here is the code…

body { background: none; } .clock { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: black; font-size: 9px; font-family: space mono; letter-spacing: 0px; }
11

here in my side its working without refresh.

1 Like
12

Hi! How did you manage to display only a specific time zone?