オンズ茨城県つくば市を拠点に、ホームページ制作・デザイン制作を行っています。直感で「...!!」や「...??」と感じたら、今すぐオンズにご相談ください。Google必要なファイルを読み込んでおいて、簡単なjQueryとHTMLを記述するだけで、ウェブページにカウントダウン・タイマーを設置できるスクリプトを紹介します。実装したサンプルは以下URLからご覧になれます。実装サンプル:http://on-ze.com/demo/jquery-simple-timer/カウントダウンはサイトにアクセスした時点から始まります。カウントが終わったときに指定した要素にCSSのクラスを追加できるので、カウント中とカウント終了後でデザインを変えることも可能。シンプルで使い勝手のいいjQueryプラグインです。超カンタン[Simple.Timer]の設置方法まずは公式サイトから必要なファイルをダウンロードしてきましょう。ダウンロード:http://csouza.me/jQuery-Simple-Timer/圧縮されているzipファイルを解凍すると、フォルダの中に「jquery.js」と「query.simple.timer.js」の2つのJSファイルを確認できるはずです。jquery.jsjquery.simple.timer.jsこの2つのファイルをサーバーにアップロードして、その後HTMLの適当な箇所で読み込みます。src="jquery.simple.timer.js"&gt;&lt;/script&gt;またこのときに、タイマーを初期化するJavaScriptのコードも同時に記述しておきましょう。ここではclass="timer"という要素にカウントダウンを表示させると仮定して、次のように記述します。&lt;script&gt;$(function(){$('.timer').startTimer();});&lt;/script&gt;次にHTMLの<body>〜</body>内、タイマーを挿入したい箇所に先ほどのclass="timer"を付与したボックス要素を作ります。HTML5から導入されたカスタムデータ属性で「data-seconds-left」または「data-minutes-left」を追加。この値でカウントに要する時間を指定します。具体的には次のようなコードになります。data-seconds-left="180"&gt;&lt;/div&gt;&lt;/body&gt;「data-minutes-left」のほうは分単位で指定、「data-seconds-left」のほうは秒単位で指定します。上記2つのコードはどちらも「3分」を意味します。基本的にはこれで設置が完了。[Simple.Timer]のオプション設定[Simple.Timer]では[onComplete]と[loop]という2つのオプションを設定することが可能です。オプション設定:「onComplete」[onComplete]ではカウントが終了したときの処理を指定できます。カウントダウン終了時にタイマーのボックス要素にclass="is-complete"という属性を追加したいとき、次のように記述すると実装できます。function(element){element.addClass('is-complete');}});});&lt;/script&gt;もちろん、もっと複雑な処理も行えるので色々試してみてください。オプション設定:「loop」[loop]では、カウントダウンが終了したときに再び最初からカウントを始めるようにループします。カウント終了から再スタートまでの時間は[loopInterval]で指定します。3,});});&lt;/script&gt;[loop]で指定する値は「true」か「false」になり、「true」にするとループします。[loopInterval]では終了〜再スタートまでの「秒数」を指定します。本当に簡単にできるのでjQuery初心者の方でも気軽に使えるはずです。公式サイト:http://csouza.me/jQuery-Simple-Timer/実装サンプル:http://on-ze.com/demo/jquery-simple-timer/こちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】要素が「横幅」と「縦幅」を持って表示されているかどうかを確認する方法。【jQuery】メニューが横からスライドして表示される[Drawer]の使い方。【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。【jQuery】要素をタイル状に並べるプラグイン[Freetile.js]の使い方。GoogleONZEオンズ茨城県つくば市を拠点にして、ホームページ制作、DTP、グラフィック・デザイン、アプリ開発、広告、各種プロモーション活動の支援を行っています。アナタの会社の本来の価値を導き出し、「集客UP、売上UP、利益UP」の仕組みを創り、経営に関わる全ての問題を[デザインのチカラ]で解決します。「...!」または「...?」と感じたら、今すぐオンズにご相談ください。