円形のタイマーを表示させるjQueryプラグイン「Pietimer」

あとどのくらい時間が残っているのか、図にしてあるとわかりやすいですよね。
Pietimer jQuery Pluginは、それを実現できるjQueryプラグインです。
円形のタイマーを表示させるjQueryプラグイン「Pietimer」サンプル

使用方法
Pietimer jQuery Pluginからファイルをダウンロード。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery.pietimer.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#id名').pietimer({
seconds: 5, //秒数
colour: 'rgba(190, 0, 0, 0.8)' //色と透明度
},
//終わったときの処理
function(){
alert('終わった!');
});
});
</script>

あとはidでくくった要素を記述し、CSSでサイズを調整すれば完成です。
<div id="id名"></div>

#id名{
width: 120px;
height: 120px;
}

円形のタイマーを表示させるjQueryプラグイン「Pietimer」サンプル

sponsors

「円形のタイマーを表示させるjQueryプラグイン「Pietimer」」をシェアする

記事作成:
記事URL:

TOP > > > 円形のタイマーを表示させるjQueryプラグイン「Pietimer」