Skip to content

Instantly share code, notes, and snippets.

@zbee
Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zbee/e1c2bcfdb80f6d950fab to your computer and use it in GitHub Desktop.
Save zbee/e1c2bcfdb80f6d950fab to your computer and use it in GitHub Desktop.
sexyTime is a small jQuery plugin for short countdown timers.
(function ($) {
$.fn.sexyTime = function (options) {
var opts = $.extend({}, $.fn.sexyTime.defaults, options);
var time = opts.time;
return this.each(function() {
var position = $(this).position();
$(this).css("z-index", "100");
$(this).css("position", "relative");
$(this).css("text-align", "center");
$(this).css("margin", "0px");
$(this).html(opts.time);
var $timer = $("<div class='sexyTimer'></div>");
$timer.attr("time", opts.time);
$timer.css("z-index", "5");
$timer.css("background", opts.color);
$timer.css("position", "absolute");
$timer.css("top", position.top);
$timer.css("left", position.left - $(this).width());
$timer.css("display", "block");
$timer.css("border-radius", "100px");
$timer.height($(this).width());
$timer.width($(this).width());
$("body").append($timer);
$(this).width($timer.width());
setInterval($.proxy(function(){
time = time - 1;
if (time >= 0) {
$(this).html(time);
shrink($timer, time);
}
}, this), 1000);
function shrink (target, time) {
var width = $(target).width() / 2 / time;
var toWidth = $(target).width() - width;
var margin = $(target).width() / time / 4;
$(target).width(toWidth);
$(target).height(toWidth);
$(target).css("top", $(target).position().top + margin);
$(target).css("left", $(target).position().left + margin);
}
});
};
$.fn.sexyTime.defaults = {
time: 10,
color: "#ACACAC"
};
}(jQuery));
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="timer"></div>
<script>
$("#timer").sexyTime({time: 10});
</script>
<!--The #timer element would be replaced instantly with the number 10 and a grey circle behind it-->
<!--Each second after initiation, the number in the element would go down by one, and the circle will shrink-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment