Adding a clock to your wix website

Ask the community
,
1

Hi, on a website made on wix, the owner had a coded clock displaying the correct time (with text). How can I do this? Thanks!

2

You can use CANVAS inside the HTML-Component (which you can place where ever you want on your page) to generate Clock which ever you want!

And you even can UPGRADE it and connect its values with your page.

Then you would be able to do following things (for example):

  • changing STYLE and COLORS of…
  • clock-Text
  • clock animated circles
  • background-color
  • font-size
  • font-style and so on (many many more)

Here an working example…
https://www.media-junkie.com/canvas-clock

3

So we have to come up with the code ourselves?

4

Normaly yes :sweat_smile:.
But i will give today a little insight how to generate such clocks when i am back home. Can take a while.:v:

5

Ok

6

Hi Pax,

If you just whant to display it like
hours:minuts:seconds (08:35:15)
and you want to show the clock ticking evry second
Then here is some small code and no canvas needed .

The only thing you should do is add a text element named txtClock.

function clock(){
    let newdate = new Date()
    let settime = newdate.getHours() + ":" + newdate.getMinutes() + ":" + newdate.getSeconds()
    $w("#txtClock").text = settime
}

$w.onReady(async function () {
    setInterval(function(){clock()},1000)
    })

This won’t be a visual round clock.

Kind regards,
Kristof.

1 Like
7

@volkaertskristof Thank you! This is great. We don’t want to be picky, but is there a way to make it regular time (with dual digits (i.e. 10:03 PM) and have it show AM or PM? On the website it shows it in military time. If you can’t do this, that’s OK.

1366Ă—768 240 KB

8

Hi Pax,
Sure its possible tk have dual digits, (tried it only when it only could have dual digits)
I’ll try to correct it in a bit if i find the time

9

@volkaertskristof No rush!

10

@paxaurora6
Ok, even if it is already resolved, here the promissed CANVAS-CLOCK.
I found it somewhere in the net and implemented it into HTML-Component…

<html>
  <head>
    <title>Clock</title>  
  </head>

  <body style="background-color:rgba(255, 255, 255, 0.1);">
    <canvas id="canvas" width="500" height="200">  </canvas>
    <script>
      var cvs = document.getElementById('canvas');
      var ctx = cvs.getContext('2d');
      ctx.lineWidth = 10;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.font = '30px Trebuchet MS';
      ctx["font-color"]='black'
      ctx.fillStyle = 'black';
      
      var draw = (function () {
          var start = 1.5 * Math.PI; // Start circle from top
          var end = (2 * Math.PI) / 100; 
          
          return function (x, y, p, text, color) {
              p = p || 100; 
              ctx.strokeStyle = color;

              ctx.beginPath();
              ctx.fillText(text, x, y);
              ctx.arc(x, y, 50, start, p * end + start, false);
              ctx.stroke();
          };
      }());

      var clock = function () {
          var date = new Date;
          var h = date.getHours();
          var m = date.getMinutes();
          var s = date.getSeconds();
          // Find percentage
          var hp = 100 / 12 * (h % 12);
          var mp = 100 / 60 * m;
          var sp = 100 / 60 * s;
          // Ensure double digits
          h = h < 10 ? '0' + h : h;
          m = m < 10 ? '0' + m : m;
          s = s < 10 ? '0' + s : s;
          
          ctx.clearRect(0, 0, cvs.width, cvs.height);
          draw(125, 100, hp, h, 'palevioletred');
          draw(250, 100, mp, m, 'limegreen');
          draw(375, 100, sp, s, 'steelblue');

          setTimeout(clock, 500);
      };
      clock();
    </script>
  </body>
</html>

https://www.media-junkie.com/canvas-clock

How to use it?

  1. Add an → HTML-Component onto your wished page.
  2. Navigate to the component’s options, where you will be able to add the shown code above.
  3. Save the changes.
  4. Publish the site.
  5. Enjoy!

And here some stuff for learning… :grin::grinning:

Yes, it is a little bit more complex then just a normal digital clock, like provided by Kristof, but has more DESIGN-SKILLS :grin: (and ist very customizable) :wink:

11

Hi @paxaurora6

Sorry, had no time anymore yesterday.

What you should do is convert it to a 2 digit string,

Add a function like this

function pad(value){

	if(value < 10){
		return "0" + value
	} else {
		return value;
	}
}

and use it here.

let settime = pad(newdate.getHours())+":"+pad(newdate.getMinutes())+":"+pad(newdate.getSeconds() )

If you look at the function you can clearly see what it does

it takes your value (hour,minuts,seconds)
Compares it to 10
if its lower then 10
return “0” + value (00,01,02,03,04,05,06,07,08,09)
else
return value (no 0 needed here since its already 2 digits).

Now about AM & PM.
(In belgium we don’t use AM or PM)
I don’t know if there is a date/time function for it but you can easly make it.
Make 2 another functions called returnAMPM & returnHours

function returnAMPM(hours){
(
	if(hours<12){
		return "AM"
	} else {
		return "PM"
	}
}

function returnHours(hours){
	if(hours > 12){
		let newHour = hours-12	
		return hours
	} else {
		return hours
	}

}

and again change the line to this

let settime = pad(returnHours(newdate.getHours()))+":"+pad(newdate.getMinutes())+":"+pad(newdate.getSeconds() + " " + returnAMPM(newdate.getHours()))

Hope this helps.

Kind regards,
Kristof

12

@volkaertskristof @russian-dima Thank you so much! We will be sure to use both of these techniques whenever we can! You two were such great help!

13

when i copy past the code into the wix html text box, it does not appaear? just the code it self shows, lol i am new to this, any help? want to add a clock with the time and seconds onto my personal site.

14

CODE → provided by Kristof is for your site-page
CODE → provided by me → is for your HTML-Component.

Read the full POST to understand everything clearly.

15

Hi i’m looking for something similar but with a specific timezone.
Can anyone help?

I posted a new topic here for more info.

@CODE-NINJA