Karim Oumghar

Pure CSS Clock


This is a analogue clock implemented purely using CSS & HTML.

Please visit full source code here

Alternate version (much simpler to understand).

I have my own implementation of another CSS clock different from the one linked above. Its a digital clock & I use CSS, Javascript, and HTML to implement it.

My version of a digital clock here…

<!-- all we need to enter inside the <body> tag is the <div> tags to display our clock -->
<html>
<body>
<div id="clock"> </div>
</body>
</html>

function displayTime()
{

	var clock = document.querySelector('#clock');

	// But there is a little problem
	// we need to pad 0-9 with an extra
	// 0 on the left for hours, seconds, minutes

	var pad = function(x)
	{
		return x < 10 ? '0'+x : x;
	};
	//this function below will change the time (hour) displayed from military to standard
	var formatHour = function(h)
	{
		var hour = h % 12;

		if(hour == 0)
		{ hour = 12;}
		return String(hour);
	};
	//this function will format our months to print the month instead of the number
	var formatMonth = function(m)
	{
		var month;
		switch(m)
		{
			case 0:
			month = "Jan ";
			break;
			case 1:
			month = "Feb ";
			break;
			case 2:
			month = "Mar ";
			break;
			case 3:
			month = "Apr ";
			break;
			case 4:
			month = "May ";
			break;
			case 5:
			month = "June ";
			break;
			case 6:
			month = "July ";
			break;
			case 7:
			month = "Aug ";
			break;
			case 8:
			month = "Sep ";
			break;
			case 9:
			month = "Oct ";
			break;
			case 10:
			month = "Nov ";
			break;
			case 11:
			month = "Dec ";
			break;
		}
		return month;
	}
	//this function displays the date
	var displayDate = function()
	{
		var d = new Date();
		var date = d.getDate();
		var month = d.getUTCMonth();
		var year = d.getFullYear();
		var dateString = formatMonth(month) + date + ", " + year;

		return dateString;
	}

	var ticktock = function() //ticktock is a function to display the time
	{
		var d = new Date();

		var h = pad( d.getHours() );
		var m = pad( d.getMinutes() );
		var s = pad( d.getSeconds() );

		var current_time = [formatHour(h),m,s].join(':');
		if(h >= 12)
		{
			clock.innerHTML = current_time + "  pm\n" + displayDate();

		}
		else
		{
			clock.innerHTML = current_time + "  am\n" + displayDate();
		}

	};

	ticktock();//calling ticktock

	// Calling ticktock() every 1 second
	setInterval(ticktock, 1000);

}
//we need to call the main method so time gets displayed
displayTime();

<style>
/* Styling it all now! */

@font-face
{
	font-family: 'digi';
	src: url('<a class="linkification-ext" title="Linkification: <a class="linkification-ext" title="Linkification: http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF" href="http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF">http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF</a>" href="<a class="linkification-ext" title="Linkification: http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF" href="http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF">http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF</a>"><a class="linkification-ext" title="Linkification: http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF" href="http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF">http://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF</a></a>');
}

html, body
{
	width: 100%; height: 100%;
}

body
{
	font-family: 'digi';
	font-size: 75%;
	background: white;//grey background color
	background-image: radial-gradient(center 0,white,#B9B7B1);
}
#clock
{
	width: 500px; height: 200px;
	border-radius:50px;
	background: #00004E;
	font-size: 7em;
	color: #00F500;

	/* Centering everything */
	position: absolute;
	left: 50%; top: 50%;
	margin-left: -125px; margin-top: -50px;

	text-align: center;
	line-height: 100px;

	border: 5px solid #E54B6B;
}

</style>

Leave a comment