Digital clock numbers

HTML & CSS
1

So I can see that the numbers to this awesome clock

are made from borders, as I see no font-family. How can I make those numbers smaller or larger? I want to be able to make the clock smaller or larger along with it.

2

The quick answer is: with a lot of “magic numbers”.
But as quick as the answer is, it is not a quick solution.
All those px values in the CSS have to be altered to make a smaller clock.

1 Like
3

@SamA74 I have played with just about every CSS value there was. Unless I’m missing something, or overlooked it?

4

There are a lot to go at. I just changed one or two values, which (predictably) broke the layout.
I’m guessing you would have to change a lot of values proportionally to scale down the clock, if you have time for that.

1 Like
5

Lol yeah I have broken it many times too :joy:

6

@SamA74 I tried at playing with this :

#clock{ 
	width:370px; 
	padding:40px;
	margin:100px auto 60px;
	position:relative;
}

Which did something, but then it scrunched up the digits.

7

@coothead will love this one :joy:

It’s all SVG :slight_smile:

1 Like
8

It’s much more easily scalable.

1 Like
9

To be fair, you could just make them all out of the same shape (probably a… stretched diamond? ) and then control them just like any starting-electronics-kit 8 segment display does. Turn on or off the segments to get a number.

2 Likes
10

Or is there a web font like that?

11

If all else fails then cheat :slight_smile:

.display{
  transform:scale(.5);
}

(That’s not a real solution).

2 Likes
12

@PaulOB touchdown! :smiley: I shall try this. @SamA74 I agree, easily scalable. But I’m not yet friends with SVG, I’m ONLY an acquaintance so far lol.

13

(That’s not a real solution).

Well what else can we do?

14

transform:scale(.5);

It works beautifully :slight_smile:

15

Trying to get it onto my blog now. Everything shows except the digits.

16

Got it now, forgot the JS :wink: . Still working on it.

17

Got it with the JS, but then nothing showed at all :frowning: .

18

Finally!

image

19

So for getting rid of the leading 0, as in 09:00 for example, I put a -1 in the first line in bold. Does this now mean that when it gets to 10:00, it will still show as 10 and not 0? I hope this doesn’t get rid of the 1.

var now = moment().format("hhmmssdA");
        **digits.h1.attr('class', digit_to_name[now[-1]]);**
        digits.h2.attr('class', digit_to_name[now[1]]);
        digits.m1.attr('class', digit_to_name[now[2]]);
        digits.m2.attr('class', digit_to_name[now[3]]);
        digits.s1.attr('class', digit_to_name[now[4]]);
        digits.s2.attr('class', digit_to_name[now[5]]);
20

No it will show as 0.

It’s probably easier to just hide a zero in that column with css.

#clock .digits div.zero:first-child {opacity:0}

You can add hours to the clock to test it out.

e.g.

     var now = moment().add(7, 'hours').format("hhmmssdA"); 
        digits.h1.attr('class', digit_to_name[now[0]]);
   etc....
1 Like