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(1.8.3)、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アナリティクスタグは流用しないで下さい。