jQueryカウントダウンプラグイン

某情報番組見てたらふと気になったので。
CSSオンリーでやりたかったので細かい動き等はふっ飛ばしました。
これ以上はcanvasかSVGかなあ。


たいした内容でもないのですが、一応MITライセンスで。
下記のJSとCSSをjQueryを読み込んだ後に書いてください。

[js title=”プラグイン本体”]
//////////////////////////////////////////////////
//Copyright (c) 2014 Hidemitsu Ikeda
//Released under the MIT license
//http://opensource.org/licenses/mit-license.php
//////////////////////////////////////////////////
(function($){
$.ksCircleCountDown=function(s){var cnt=$(s).data(‘count’);var h='<span class="ks-count-element ks-count-border-default"></span>’;for(var i=0;i<cnt;i++){$(s).html($(s).html()+$(h).css({zIndex:cnt-i}).attr(‘data-count’,i).html(cnt-i).get(0).outerHTML);}$(s).children().each(function(index){var t =(cnt-$(this).data(‘count’))*100;if(0==index){setTimeout(function(){countDown($(this));}.bind(this,this),t);}else{setTimeout(function(){$(this).css({display:’inline-block’});}.bind(this,this),t);}});}
$.fn.ksCircleCountDown=function(){return this.each(function(){new $.ksCircleCountDown(this);});};
function countDown(s){s.css({display:’inline-block’}).addClass(‘ks-count-border-down’).removeClass(‘ks-count-border-default’).animate({top:’-25px’},700).animate({opacity:0},300,function(){if($(this).nextAll().length>0){countDown($(this).next());}else{$(this).parent().html(”).trigger(‘KSCIRCLECOUNTDOWNFINISH’);}});}
})(jQuery);
[/js]

[css title=”CSS”]
.ks-count-element
{
position:relative;
display:none;
background-color:#fff;
width:50px;
height:50px;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
margin:0 0 0 -25px;
text-align:center;
font-size:50px;
color:#fff;
overflow:hidden;
}
.ks-count-border-default
{
border:4px solid #000;
}
.ks-count-border-down
{
border:4px solid #fff;
background-color:#0f0;
}
[/css]

とりあえずプラグイン名はksCircleCountDownです。
使用方法ですが、適当なDIV要素に対して、$('div').ksCircleCountDown();です。
div要素のdata-count属性を付与してやって、そこにカウントダウンの数値を指定する感じです。
カウンタが0になったらKSCIRCLECOUNTDOWNFINISHイベントが発火します。
終わったことがわからないと困るので。
あとはテストコード見てください。

[html title=”テストコード”]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ネタカウント</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//////////////////////////////////////////////////
//Copyright (c) 2014 Hidemitsu Ikeda
//Released under the MIT license
//http://opensource.org/licenses/mit-license.php
//////////////////////////////////////////////////
(function($){
$.ksCircleCountDown=function(s){var cnt=$(s).data(‘count’);var h='<span class="ks-count-element ks-count-border-default"></span>’;for(var i=0;i<cnt;i++){$(s).html($(s).html()+$(h).css({zIndex:cnt-i}).attr(‘data-count’,i).html(cnt-i).get(0).outerHTML);}$(s).children().each(function(index){var t =(cnt-$(this).data(‘count’))*100;if(0==index){setTimeout(function(){countDown($(this));}.bind(this,this),t);}else{setTimeout(function(){$(this).css({display:’inline-block’});}.bind(this,this),t);}});}
$.fn.ksCircleCountDown=function(){return this.each(function(){new $.ksCircleCountDown(this);});};
function countDown(s){s.css({display:’inline-block’}).addClass(‘ks-count-border-down’).removeClass(‘ks-count-border-default’).animate({top:’-25px’},700).animate({opacity:0},300,function(){if($(this).nextAll().length>0){countDown($(this).next());}else{$(this).parent().html(”).trigger(‘KSCIRCLECOUNTDOWNFINISH’);}});}
})(jQuery);

$(function(){
var e = ‘#countdown’;
$(‘#countdown’).ksCircleCountDown();
$(‘#countdown’).on(‘KSCIRCLECOUNTDOWNFINISH’,function(){
console.debug(‘KSCIRCLECOUNTDOWNFINISH’);
})
});
</script>
<style>
#countdown,#countdown2
{
position:relative;
margin:0 0 0 25px;
text-align:right;
}

.ks-count-element
{
position:relative;
display:none;
background-color:#fff;
width:50px;
height:50px;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
margin:0 0 0 -25px;
text-align:center;
font-size:50px;
color:#fff;
overflow:hidden;
}
.ks-count-border-default
{
border:4px solid #000;
}
.ks-count-border-down
{
border:4px solid #fff;
background-color:#0f0;
}
</style>
</head>

<body style="background-color:#333;">
<div id="countdown" data-count="7" style="margin-top:300px;"></div>
</body>
</html>
[/html]

実際の動作はこちらを確認ください。