GOOCODE - Find your code/scripts

35 In previous articles, we introduced several jquery digital clock realization with demos, they are Digital alarm clock by HTML5, Use jQuery and CSS3 to create digital clock (jquery part). If you are interested in them, you can go back to review them. Today we give you another digital clock example by jquery similar like previous one. May you like it.

Now let's go step by step.
HTML

<div id="clock" class="light">
	<div class="display">
		<div class="weekdays">
		</div>
		<div class="ampm">
		</div>
		<div class="alarm">
		</div>
		<div class="digits">
		</div>
	</div>
</div>

Main CSS Style

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

#clock:after{
	content:'';
	position:absolute;
	width:400px;
	height:20px;
	border-radius:100%;
	left:50%;
	margin-left:-200px;
	bottom:2px;
	z-index:-1;
}


#clock .display{
	text-align:center;
	padding: 40px 20px 20px;
	border-radius:6px;
	position:relative;
	height: 54px;
}

Main js
script.js

	var clock = $('#clock'),
		alarm = clock.find('.alarm'),
		ampm = clock.find('.ampm');

	// Map digits to their names (this will be an array)
	var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');

	// This object will hold the digit elements
	var digits = {};

	// Positions for the hours, minutes, and seconds
	var positions = [
		'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
	];

	// Generate the digits with the needed markup,
	// and add them to the clock

	var digit_holder = clock.find('.digits');

	$.each(positions, function(){

		if(this == ':'){
			digit_holder.append('<div class="dots">');
		}
		else{

			var pos = $('<div>');

			for(var i=1; i<8; i++){
				pos.append('<span class="d' + i + '">');
			}

			// Set the digits as key:value pairs in the digits object
			digits[this] = pos;

			// Add the digit elements to the page
			digit_holder.append(pos);
		}

	});

	// Add the weekday names

	var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
		weekday_holder = clock.find('.weekdays');

	$.each(weekday_names, function(){
		weekday_holder.append('<span>' + this + '</span>');
	});

	var weekdays = clock.find('.weekdays span');


	// Run a timer every second and update the clock

	(function update_time(){

		// Use moment.js to output the current time as a string
		// hh is for the hours in 12-hour format,
		// mm - minutes, ss-seconds (all with leading zeroes),
		// d is for day of week and A is for AM/PM

		var now = moment().format("hhmmssdA");

		digits.h1.attr('class', digit_to_name[now[0]]);
		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]]);

		// The library returns Sunday as the first day of the week.
		// Stupid, I know. Lets shift all the days one position down, 
		// and make Sunday last

		var dow = now[6];
		dow--;
		
		// Sunday!
		if(dow < 0){
			// Make it last
			dow = 6;
		}

		// Mark the active day of the week
		weekdays.removeClass('active').eq(dow).addClass('active');

		// Set the am/pm text:
		ampm.text(now[7]+now[8]);

		// Schedule this function to be run again in 1 sec
		setTimeout(update_time, 1000);

	})();

	// Switch the theme

	$('a.button').click(function(){
		clock.toggleClass('light dark');
	});

});

Another js code we use plugin moment.js.
In the end include the files:

<script src="js/moment.min.js"></script>
<script src="assets/js/script.js"></script>
<link rel="stylesheet" href="assets/css/style.css" type="text/css">

Then you will see the effect we revealed at the begin. If you have any suggestions about this jquery digital clock timer, please write to us. We will improve it and make it better.