今日の人気記事

まだデータがありません。

円形のアニメ効果付きタイマー「PieTimer」

当ページのリンクには広告が含まれています。

スポンサーリンク

円型のアニメ効果付きタイマーを作成するプラグイン「PieTimer」を紹介します。

jQueryプラグイン「PieTimer」

このプラグインを使えば、時間をアニメーション効果でカウントする円形のタイマーを作成することができます。

ページロード後に円の形にカウントがはじまり、カウント終了後にはアラートを表示することができます。

スポンサーリンク

デモの円形タイマーをご覧ください。

「PieTimer」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="PieTimerのデモでーす。">
<title>PieTimer - jQueryプラグイン</title>
<link rel="stylesheet" type="text/css" href="pietimer.css">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.pietimer.js"></script>
<script>
$(function() {
  $('#timer').pietimer({
    timerSeconds: 6,
    color: '#678',
    fill: false,
    showPercentage: true,
    callback: function() {
      alert("時間だよぉ〜。");
    }
  });
});
</script>

</head>
<body>
<h1>PieTimerのデモでーす。</h1>
  <div id="timer"></div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)