今日の人気記事

  1. Bootstrapを利用した画像ポップアップ・スライダー「Bootstrap Image Gallery」
  2. ページごとに画面をスクロール遷移「Scrollify」

カウントダウン作成「Countdown」マルチ言語対応

スポンサーリンク

カウントダウンが簡単につくれちゃうjQueryプラグイン「Countdown」を紹介します。

jQueryプラグイン「Countdown」

jQueryプラグイン「Countdown」は、さまざまなフォーマットのカウントダウンが作成できるプラグインです。しかもマルチ言語対応のjsファイルまで用意されている至れり尽くせりのプラグインです。
cf. » jQueryプラグイン「Countdown Cube」と比較してみてください!

スポンサーリンク

デモをご覧ください。来年までの残り日数、時間をカウントしています。

「Countdown」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Countdown - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="css/jquery.countdown.css">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript" src="js/jquery.countdown-ja.js"></script>
</head>
<body>
<p>来年まであと……</p>
<div id="defaultCountdown"></div>
<style type="text/css">
#defaultCountdown { width: 240px; height: 45px; }
</style>
<script type="text/javascript">
$(function () {
  var austDay = new Date();
  austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 1);
  $('#defaultCountdown').countdown({until: austDay});
  $('#year').text(austDay.getFullYear());
});
</script>
</body>
</html>

その他詳細はこちらからどうぞ。
» jQuery Countdown

スポンサーリンク

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