今日の人気記事

  1. 追尾型(オーバーレイ)広告を表示「Meerkat」
  2. スクロールしてもついてくる要素を指定「Sticky-kit」
  3. Bootstrapを利用した画像ポップアップ・スライダー「Bootstrap Image Gallery」
  4. 同じ内容の入力フォームを追加・削除「Repeater」

現在時刻も表示できるカウントダウン・タイマー「countdownTimer」

スポンサーリンク

現在時刻も表示できるカウントダウン・タイマーを作成するプラグイン「countdownTimer」を紹介します。

jQueryプラグイン「countdownTimer」

このプラグインを使えば、「日」「時」「分」「秒」などを細かく設定できるカウントダウンと・タイマーをWeb上に作成することができます。

さらに、現在時刻の表示や文字サイズも指定できるので、おすすめプラグインです!

スポンサーリンク

デモのカウントダウン・タイマーをご覧ください。

「countdownTimer」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="countDownTimer のデモでーす。">
<title>countDownTimer - jQuery Plugin Demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.countdownTimer.js"></script>
<link rel="stylesheet" href="jquery.countdownTimer.css" />
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/countdown-timer/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>countdownTimerのデモでーす。</h1>

<p>現在時刻</p>
<span id="current_timer"></span>
<script>
$(function(){
  $('#current_timer').countdowntimer({
    currentTime : true,
    size : "lg"
  });
});
</script>

<p>3分タイマー</p>
<span id="ms_timer"></span>
<script>
$(function(){
  $('#ms_timer').countdowntimer({
    minutes :3,
    size : "lg"
  });
});
</script>

<p>4時間23分タイマー</p>
<span id="hm_timer"></span>
<script>
$(function(){
  $('#hm_timer').countdowntimer({
    hours :4,
    minutes :23,
    size : "lg"
  });
});
</script>

<p>東京オリンピック開催日までのカウントダウン</p>
<span id="future_date"></span>
<script>
$(function(){
  $('#future_date').countdowntimer({
    dateAndTime : "2020/07/24 00:00:00",
    size : "lg"
  });
});
</script>

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

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