A CodePen by Jentan Bernardus. jQuery Countdown

2/6/2013 - 5:27 PM

A CodePen by Jentan Bernardus. jQuery Countdown

<!-- Countdown dashboard start -->
		<div id="countdown_dashboard">
     
      <!--<h1>jQuery Countdown</h1>-->
      <hr class="light">
			<div class="dash weeks_dash">
				<span class="dash_title">weeks</span>
				<div class="digit">4</div>
				<div class="digit">6</div>
			</div>

			<div class="dash days_dash">
				<span class="dash_title">days</span>
				<div class="digit">0</div>
				<div class="digit">6</div>
			</div>

			<div class="dash hours_dash">
				<span class="dash_title">hours</span>
				<div class="digit">1</div>
				<div class="digit">5</div>
			</div>

			<div class="dash minutes_dash">
				<span class="dash_title">minutes</span>
				<div class="digit">0</div>
				<div class="digit">4</div>
			</div>

			<div class="dash seconds_dash">
				<span class="dash_title">seconds</span>
				<div class="digit">3</div>
				<div class="digit">3</div>
			</div>
      
      <div class="clearfix"></div>
      
      <hr class="light">

		</div>
		<!-- Countdown dashboard end -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

script.js

/* jQuery Countdown plugin v0.9.5  */

(function($){

	$.fn.countDown = function (options) {

		config = {};

		$.extend(config, options);

		diffSecs = this.setCountDown(config);

		$('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
		$(this).doCountDown($(this).attr('id'), diffSecs, 500);

		if (config.onComplete)
		{
			$.data($(this)[0], 'callback', config.onComplete);
		}
		if (config.omitWeeks)
		{
			$.data($(this)[0], 'omitWeeks', config.omitWeeks);
		}
		return this;

	};

	$.fn.stopCountDown = function () {
		clearTimeout($.data(this[0], 'timer'));
	};

	$.fn.startCountDown = function () {
		this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
	};

	$.fn.setCountDown = function (options) {
		var targetTime = new Date();

		if (options.targetDate)
		{
			targetTime.setDate(options.targetDate.day);
			targetTime.setMonth(options.targetDate.month-1);
			targetTime.setFullYear(options.targetDate.year);
			targetTime.setHours(options.targetDate.hour);
			targetTime.setMinutes(options.targetDate.min);
			targetTime.setSeconds(options.targetDate.sec);
		}
		else if (options.targetOffset)
		{
			targetTime.setDate(options.targetOffset.day + targetTime.getDate());
			targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
			targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
			targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
			targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
			targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
		}

		var nowTime = new Date();

		diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);

		$.data(this[0], 'diffSecs', diffSecs);

		return diffSecs;
	};

	$.fn.doCountDown = function (id, diffSecs, duration) {
		$this = $('#' + id);
		if (diffSecs <= 0)
		{
			diffSecs = 0;
			if ($.data($this[0], 'timer'))
			{
				clearTimeout($.data($this[0], 'timer'));
			}
		}

		secs = diffSecs % 60;
		mins = Math.floor(diffSecs/60)%60;
		hours = Math.floor(diffSecs/60/60)%24;
		if ($.data($this[0], 'omitWeeks') == true)
		{
			days = Math.floor(diffSecs/60/60/24);
			weeks = Math.floor(diffSecs/60/60/24/7);
		}
		else 
		{
			days = Math.floor(diffSecs/60/60/24)%7;
			weeks = Math.floor(diffSecs/60/60/24/7);
		}

		$this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
		$this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
		$this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
		$this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
		$this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);

		$.data($this[0], 'diffSecs', diffSecs);
		if (diffSecs > 0)
		{
			e = $this;
			t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
			$.data(e[0], 'timer', t);
		} 
		else if (cb = $.data($this[0], 'callback')) 
		{
			$.data($this[0], 'callback')();
		}

	};

	$.fn.dashChangeTo = function(id, dash, n, duration) {
		$this = $('#' + id);
		d2 = n%10;
		d1 = (n - n%10) / 10

		if ($('#' + $this.attr('id') + ' .' + dash))
		{
			$this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:first', d1, duration);
			$this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:last', d2, duration);
		}
	};

	$.fn.digitChangeTo = function (digit, n, duration) {
		if (!duration)
		{
			duration = 800;
		}
		if ($(digit + ' div.top').html() != n + '')
		{

			$(digit + ' div.top').css({'display': 'none'});
			$(digit + ' div.top').html((n ? n : '0')).slideDown(duration);

			$(digit + ' div.bottom').animate({'height': ''}, duration, function() {
				$(digit + ' div.bottom').html($(digit + ' div.top').html());
				$(digit + ' div.bottom').css({'display': 'block', 'height': ''});
				$(digit + ' div.top').hide().slideUp(10);

			
			});
		}
	};

})(jQuery);

jQuery(document).ready(function() {
				$('#countdown_dashboard').countDown({
					targetDate: {
						'day': 		14,
						'month': 	2,
						'year': 	2013,
						'hour': 	22,
						'min': 		0,
						'sec': 		0					}
				});
			});

style.css

body {
	margin: 0;
	padding: 0;
  background: 
    #fff 
    /*url(http://subtlepatterns.com/patterns/pw_maze_black.png) repeat;*/
   /*url(http://subtlepatterns.com/patterns/pw_maze_white.png) repeat;*/
  /*  url(http://subtlepatterns.com/patterns/kindajean.png) repeat*/
    ;
  text-align: center;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: normal;
  text-shadow: 0 1px 1px #fff;
}

h1 {
  font-weight:100;
  font-size:40px;
  letter-spacing: -1px;
  color: #777;
/*  text-shadow: none;*/
}

#container {
	margin: 0 auto;
	width: 100%;
}

#countdown_dashboard {
	width: 700px;
  height: 210px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 3px;
  /*border:1px solid #eee;*/
  background: rgba(255,255,255,0.1);
  box-shadow: 5px;
  
}

.dash {
	width: 110px;
	height: 114px;
	background: transparent url('../images/dash.png') 0 0 no-repeat;
	float: left;
	margin-left: 20px;
	position: relative;
}

.dash .digit {
	font-size: 55pt;
	font-weight: 800;
	float: left;
	width: 55px;
	text-align: center;
	font-family: inherit;
	color: #000;
	position: relative;
}

.dash_title {
	position: absolute;
	display: block;
	bottom: 0px;
	right: 6px;
	font-size: 9pt;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 2px;
  font-weight:100;
}

hr {margin: 30px 0;}

hr.dark {
  height:1px;
  background: #111;
  border: 0;
  border-bottom:1px solid #222;
}
hr.light {
  height:1px;
  background: #ccc;
  border: 0;
  border-bottom:1px solid #fff;
}

.clearfix {
  clear:both;
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

A CodePen by Jentan Bernardus. jQuery Countdown