jquery.classyled.jsを使って、Webサイト上に時間やカウントダウンの数字をフォーマット化しデジタルに表示する方法をご紹介します。
Contents
時間やカウントダウンの数字をデジタルに表示するCSSの記述
※必要に応じて変更して下さい。
<style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:18px; font-weight:bold; line-height:1.6em; text-align:center; padding:15px 0; } #idWrap{ width:700px; margin:0 auto; text-align:left; } #led0,#led1{ background-color:#000; } --> </style
時間やカウントダウンの数字をデジタルに表示する読み込みJsファイル
※jquery.min.js、raphael.js、jquery.classyled.jsファイルを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/raphael.js"></script> <script src="js/jquery.classyled.js"></script>
時間やカウントダウンの数字をデジタルに表示するHTMLの記述
※時間やカウントダウンの数字をデジタルにフォーマット化した4パターンを表示します。
<h1>時間をフォーマット化しデジタルに表示します。</h1> <div id="led0" class="autosize"></div> <br /> <div id="led1" class="autosize"></div> <p>フォーマット=hh:mm</p> <div id="led2" class="autosize"></div> <p>フォーマット=hh:mm:ss</p> <div id="led3" class="autosize"></div>
jquery.classyled.jsを使って、Webサイト上に時間やカウントダウンの数字をフォーマット化しデジタルに表示するJavaScriptの記述
※new ClassyLED({タグid , 表示情報(時間やカウントダウン) , フォーマット方法 , 文字色 , 背景色 , フォントサイズ , ドットの丸み})で表示方法を指定します。4パターンの表示を用意しました。必要に応じて変更して下さい。
<script> $(document).ready(function() { var l0 = new ClassyLED({ id : "led0", type : "countdown", format : "ddd:hh:mm:ss", color : "#eee", bgcolor : "#000", size : 8, rounded : 1, led : "font1" }); var l1 = new ClassyLED({ id : "led1", type : "random", length : 7, color : "#af0", bgcolor : "#101a10", size : 8, rounded : 6 }); var l2 = new ClassyLED({ id : "led2", type : "time", format : "hh:mm", color : "#f0a", bgcolor : "#222", size : 10, rounded : 4 }); var l3 = new ClassyLED({ id : "led3", type : "time", format : "hh:mm:ss", hourformat : 12, color : "#fa0", bgcolor : "#222", size : 10, rounded : 0 }); }); </script>
jquery.classyled:時間をフォーマット化しデジタルに表示するデモページ
jquery.classyled:時間をフォーマット化しデジタルに表示するデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告