Webサイトに時間やカウントダウンをデジタル表示する方法【jquery.classyled.js】 DAD UNION

jquery.classyled.jsを使って、Webサイト上に時間やカウントダウンの数字をフォーマット化しデジタルに表示する方法をご紹介します。

Contents

時間やカウントダウンの数字をデジタルに表示するCSSの記述
時間やカウントダウンの数字をデジタルに表示する読み込みJsファイル
時間やカウントダウンの数字をデジタルに表示するHTMLの記述
jquery.classyled.jsを使って、Webサイト上に時間やカウントダウンの数字をフォーマット化しデジタルに表示するJavaScriptの記述
jquery.classyled：時間をフォーマット化しデジタルに表示するデモページ

時間やカウントダウンの数字をデジタルに表示する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>