今日の人気記事

  1. テーブルにタブ機能を追加「Table Tabs」
  2. クリック操作で開閉する左右のサイドパネル「Panel Slider」
  3. テーブルにスクロールバーをつける「Scroll Table」
  4. 左右にスクロールできるタブメニュー「ScrollTabs」
  5. 何でもできる画像ギャラリー「Tikslus Carousel」

レトロなフリップ時計やカウントダウンタイマーを実装「flipCountDown」

スポンサーリンク

レトロなフリップ時計やカウントダウンタイマーを実装するプラグイン「flipCountDown」を紹介します。

jQueryプラグイン「flipCountDown」

このプラグインを使えば、時間の板がパタパタと回転するパタパタ時計(フリップ時計、flip clock)を実装することができます。

また、このパタパタを利用したカウントダウンタイマーを実装することもできます。

オプションでは時計のサイズやカウントダウンまでの日時などを指定することができます。

スポンサーリンク

それではデモページの時計とタイマーをご覧ください。

「flipCountDown」のデモ

デモのソース(HTML + jQuery)


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

<h3>時計</h3>
<div id="clock"></div>

<h3>カウントダウン(東京五輪まで)</h3>
<div id="timer"></div>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.flipcountdown.js"></script>
<script>
jQuery(function($){
  $('#clock').flipcountdown();
  $('#timer').flipcountdown({
    size:'md',
    beforeDateTime:'7/24/2020 00:00:01'
  });
});
</script>

</body>
</html>
スポンサーリンク

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