ホームページ上でカウントダウンを実現するjQueryCountdownプラグイン

11_8_5_1_1

カウントダウンを実現し指定時間が過ぎると別窓でアラーム表示
指定した時間、秒数から1秒ずつカウントダウンされるスクリプトです。指定時間に達すると別窓でアラート表示します。いつか必ず使うときがくると思って覚書です。。。

カウントダウンを実現するjQueryCountdownプラグイン

1秒ずつカウントダウンされるところが購買意欲というか心理をくすぐるところってありますよね。指定時間になるとアラート表示されるところも嬉しいですね。

サンプル1

Días
Horas
Minutos
Segundos

サンプル2(5秒でアラートが表示されます)

Minutos
Segundos

head部記述 サンプル

<script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
        $('#counter').countdown({
          image: 'img/digits.png',
          startTime: '01:12:12:00'
        });

        $('#counter_2').countdown({
          image: 'img/digits.png',
          startTime: '00:05',
          timerEnd: function(){ alert('5秒経過しました!'); },
          format: 'mm:ss'
        });
      });
    </script>

スクリプト上部がサンプル1で下部がサンプル2のものです。

サンプル1ではstartTimeの設定を変更することでカウントダウン時間を変更することができます。

サンプル2はTimeEndの項目でアラートを表示設定することができます。今回は5秒だけの表示にしたので、日や時間は不必要になりますので、formatのところで設定します。

HTML部記述 サンプル

  <div id="counter"></div>
  <div class="desc">
    <div>Días</div>
    <div>Horas</div>
    <div>Minutos</div>

    <div>Segundos</div>
  </div>

  <div id="counter_2"></div>
  <div class="desc">
    <div>Minutos</div>

    <div>Segundos</div>
  </div>

CSS部記述 サンプル

      br { clear: both; }
      .cntSeparator {
        font-size: 54px;
        margin: 10px 7px;
        color: #000;
      }
      .desc { margin: 7px 3px; }
      .desc div {
        float: left;
        font-family: Arial;
        width: 70px;
        margin-right: 65px;
        font-size: 13px;
        font-weight: bold;
        color: #000;
      }

一言

あまり使う頻度は高くはないとは思いますが、いざというときのために知っておくといいかもしれません。イベントの告知や期間限定セールなどに使えそうです。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/jquery/474/trackback/