CSS styling for a javascript clock

Question

I have created a javascript & php clock, the code for this is below. However what I am trying to do is using CSS create the look of the mock up I have created, also below. Could somebody please show me the CSS they would use and also where they would apply the CSS as I am totally lost.

The code is also below

<script type="text/javascript">
    tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
    tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

    function GetClock(){
        var d=new Date(+new Date + 12096e5);
        var dx=d.toGMTString();
        dx=dx.substr(0,dx.length -3);
        d.setTime(Date.parse(dx))
        d.setSeconds(d.getSeconds() + <?php     date_default_timezone_set('Europe/London'); echo date('Z'); ?>);
        var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

        if(nhour==0){ap=" AM";nhour=12;}
        else if(nhour<12){ap=" AM";}
        else if(nhour==12){ap=" PM";}
        else if(nhour>12){ap=" PM";nhour-=12;}

        if(nyear<1000) nyear+=1900;
        if(nmin<=9) nmin="0"+nmin;
        if(nsec<=9) nsec="0"+nsec;

        document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
    }

    window.onload=function(){
        GetClock();
        setInterval(GetClock,1000);
    }
</script>
<div id="clockbox"></div>

I have tried this several times myself as well as trying research. I was going to include some CSS to show what I have done before however it was so bad and disjointed, it would confuse the question so please forgive me for not including this. If somebody could just show me where to implement the CSS etc that would be amazing.

STYLE THAT I WOULD LIKE

HERE IS A LIVELINK FOR THE CURRENT CLOCK WITHOUT CSS STYLING I SHALL REMOVE THIS WHEN THE QUESTION IS ANSWERED FOR FUTURE POSTERITY OF THE POST.

You're going to want to look into using [the CSS font property.](https://developer.mozilla.org/en-US/docs/Web/CSS/font) — Dryden Long, Feb 26 '15 at 17:48

score 0 · Answer 1 · answered Feb 26 '15 at 17:54

I would split this out into divs, by using this line to throw out the clock:

document.getElementById('clockbox').innerHTML="<div class='clock-day'>" + tday[nday] + "</div><div class='clock-time'>" + nhour + ":" + nmin + ":" + nsec + "</div><div class='clock-ampm'>" + ap + "</div><div class='clock-date'>" + tmonth[nmonth] + " " + ndate + ", " + nyear + "</div>";

Working on the CSS now...

score 0 · Answer 2 · answered Feb 26 '15 at 18:00

Here you are good sir ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0047)http://www.cambridgedesigncompany.com/clock.php -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>
<style type="text/css">

#clockbox{ color:#A9A9A9; font-family:sans-serif; text-transform:uppercase; font-size:20px}
.day{display:block;
}
.month{
    display:block;
    font-size:15px;
}
.time{font-size:25px;
}
.ampm{font-size:15px;}

</style>
</head>

<body>
<script type="text/javascript">
tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function GetClock(){
var d=new Date(+new Date + 12096e5);
var dx=d.toGMTString();
dx=dx.substr(0,dx.length -3);
d.setTime(Date.parse(dx))
d.setSeconds(d.getSeconds() + 0);
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

     if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}

if(nyear<1000) nyear+=1900;
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;

document.getElementById('clockbox').innerHTML="<span class='day'>"+tday[nday]+"</span>"+"<span class='time'> "+nhour+":"+nmin+":"+nsec+"</span><span class='ampm'>"+ap+"</span><span class='month'>"+tmonth[nmonth]+" "+ndate+", "+nyear+"</span>";
}

window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox">Thursday, March 12, 2015 5:49:30 PM</div>


</body>
</html>

Keep in mind the days are changing, so the same `font-size` will apply to the different days causing different width for each day. I made that mistake too. — balintpekker, Feb 27 '15 at 01:42

balintpekker · Answer 3 · 2015-02-27T09:20:29.067

After a bit of work I realized you can't just add some font-size into CSS for different lines. If you do so, when the day changes, it will ruin the already given font-size of an element. For example Thursday has a size of 24pt. After JavaScript changes day to Friday it will also have a 24pt size.

In that case, it will ruin the design, and Friday won't have the same width as the other two lines below. For that, there is a jQuery plugin called BigText. You can test it here.

There is another plugin called FitText if that's better for you.

NOTE: Please please keep in mind, Stack Overflow is not a community writing codes for you. At least, next time show us what you've tried (and what went wrong).

For now I implemented the plugin below, hope it will suit your needs.

tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function GetClock(){
    var d=new Date(+new Date + 12096e5);
    var dx=d.toGMTString();
 dx=dx.substr(0,dx.length -3);
 d.setTime(Date.parse(dx))
 d.setSeconds(d.getSeconds() + 0);
    var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

        if(nhour==0){ap=" AM";nhour=12;}
   else if(nhour<12){ap=" AM";}
   else if(nhour==12){ap=" PM";}
   else if(nhour>12){ap=" PM";nhour-=12;}

 if(nyear<1000) nyear+=1900;
 if(nmin<=9) nmin="0"+nmin;
 if(nsec<=9) nsec="0"+nsec;

 document.getElementById('1').innerHTML = "" + tday[nday].toUpperCase() + "";
    
        document.getElementById('2').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "<span style=\"font-size: 22px;\">" + ap + "</span>";
    
        document.getElementById('3').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
}

window.onload=function(){
    GetClock();
    setInterval(GetClock,1000);
    $('#bigtext').bigtext();
}

body { font-family: Helvetica, sans-serif; }
#bigtext {
    border: 1px solid rgba(255,0,0,0.5);
    color: #ccc;
    padding: 40px 15px;
}

<div id="bigtext" style="width: 200px">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.zachleat.com/bigtext/demo/js/modernizr-1.6.min.js"></script>
<script src="http://www.zachleat.com/bigtext/demo/js/jquery.ba-throttle-debounce.min.js"></script>
<script src="http://www.zachleat.com/bigtext/bigtext.js"></script>

Fiddle

score 0 · Answer 4 · 2015-02-26T18:36:20.390

0

New css:

#clockbox {
  border-width:1px;
  border-style:solid;
  border-color:red;
  padding:5px;
  width:210px;
  height:220px;
}

#clockboxtext {
     margin-top:50px;   
    font-family:'Calibri';
        color:#CCCCCC;
    margin-left:5px;
}

#nday {
     font-size:40px;
}

#time {
 font-size:50px;
}
.ap {
    font-size:20px;
}

#date {
    font-size:30px;
}

Have a look at my jsfiddle for the whole code

https://jsfiddle.net/wb7168dr/

Look at it. It's nearly the same :)

Edit If anyone needs a german version .... there's one: German version

edited Feb 26 '15 at 18:36

answered Feb 26 '15 at 18:08

[A pixel is the smallest unit value to render something with.](http://stackoverflow.com/questions/13891177/css-border-less-than-1px/13891295#13891295) The border won't show if it's less than 1px wide. – balintpekker Feb 26 '15 at 18:11
Thanks. Jsfiddle is ignoring this wrong value. I will edit @balintpekker – Feb 26 '15 at 18:13
Keep in mind the days are changing, so the same `font-size` will apply to the different days causing different width for each day. I made that mistake too. – balintpekker Feb 27 '15 at 01:41

score 0 · Answer 5 · answered Feb 26 '15 at 18:21

You're going to want to split the date entry into different divs so that you can style each separately (you can do with spans as well):

<div class="clock" id="day"></div>
<div class="clock" id="time"></div><div class="clock" id="hour"></div>
<div class="clock" id="date"></div>

Then adjust the script to place the correct values into each div:

document.getElementById('day').innerHTML = "" + tday[nday].toUpperCase() + "";
document.getElementById('time').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "";
document.getElementById('hour').innerHTML = "" + ap + "";
document.getElementById('date').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";

You can then write your CSS to style each element separately:

.clock {
  font-family:Arial,sans-serif;
  color:#bbb;
  font-size: 44px;
}
#time {
  display:inline-block;
  letter-spacing:3px;
}
#hour {
  margin-left:10px;
  display:inline-block;
  font-size:28px;
}
#date {
  font-size:30px;
}

See working example at:

http://jsfiddle.net/yLga4c37/5/

Keep in mind the days are changing, so the same `font-size` will apply to the different days causing different width for each day. I made that mistake too. — balintpekker, Feb 27 '15 at 01:42

CSS styling for a javascript clock

5 Answers5