jQuery LED

JavaScript

LEDディスプレイのようなカウントダウン・タイマー・時計を実装できる「jQuery LED」

jQuery LEDは、LEDディスプレイで表示されるようなカウントダウン・タイマー・時計を実装できるjQueryプラグインです。デジタルっぽさを強調したい時やそのような雰囲気をサイトに取り入れたい時などに活用したくなりますね。

jQuery LED

デモ

デモページには、フォーマット、カラー、背景カラー、サイズなどが異なるデモがいくつか設置されています。LEDディスプレイで表示されているかのようなデザインが、とても印象的ですね。

数字もリアルタイムでカウントダウンされていきます。デジタル感を演出したいという人には、ピッタリのプラグインといえそうです。

実装に関しても、かなりシンプルに記述できるので手軽に使用できると思います。また、オプションもいろいろ用意されているのが嬉しいですね。

主なオプションは、type、format、value、color、background_color、size、rounded、spacing、font_type、hour_format、count_toです。各項目のデフォルト値は、typeが’time’、formatが’hh”mm’、colorが’#000’、sizeが12、roundedが1、spacingが1、font_typeが1、hour_formatが24です。

ちなみに、typeにはtimeの他にcountdown、random、numberといった値も用意されています。

手軽に実装できカスタマイズもしやすい、LEDディスプレイのようなカウントダウン・タイマー・時計を実装したいという人は、ぜひ「jQuery LED」をチェックしてみてはいかがでしょうか?

jQuery LED

Bootstrap Mobile FullScreen Modalスマホからのモーダルウィンドウを使いやすくしてくれる「Bootstrap Mobile FullScreen Modal」前のページ

シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」次のページSimpleAccordion

関連記事

  1. Modaal

    JavaScript

    アクセシビリティに優れたモーダルウィンドウを実装できる「Modaal」

    ModaalはWCAG 2.0のレベルAAをサポートしているアクセシビ…

  2. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

  3. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  4. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  5. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  6. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP