jquery.classyled:時間をデジタルに表示するJs



時間をフォーマット化しデジタルに表示します。

1.読込む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>

2.HTMLの記述例

4パターン表示します。

    <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>

3.JavaScriptの記述例

<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:時間をフォーマット化しデジタルに表示するデモページ

ソース元:ClassyLED | Class.PM

これでデジタル時計の、
Webアプリは簡単に出来そうな気がします。