今日の人気記事

  1. 入力フォームのフォーカスを自動でタブ移動「Autotab」

レトロなフリップ時計やカウントダウンタイマーを実装「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>
スポンサーリンク

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