指定時間帯の表示

店舗や美容院など営業時間を表示することは多々あります。
但し、画像で対応する場合時間帯が変更になると画像を作りなおす必要があります。
今回は画像を使用せずに対応できる方法をやってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            jQuery(function() {

                function timeTable(mainID, appendID, setHS, setMS, setHE, setME) {
                    // Set Time
                    var timeS = ( (setHS   * (360 / 12)) + (setMS * ((360 / 12) / 60)) );
                    var timeE = ( (setHE   * (360 / 12)) + (setME * ((360 / 12) / 60)) );
                    // Main
                    for (var step = timeS; step <= timeE; step = (step + 0.1)) {
                        jQuery('#' + mainID).clone().attr('id', '').appendTo('#' + appendID).css({transform:'rotateZ(' + step + 'deg)', visibility:'visible'});
                    }
                };
                
                // clock 1
                timeTable('line_base1', 'clock_area1', 8, 15, 12, 0);
                // clock 2
                timeTable('line_base2', 'clock_area2', 10, 0, 12, 0);
                timeTable('line_base2', 'clock_area2', 3, 30,  7, 30);
                // clock 3
                timeTable('line_base3', 'clock_area3', 2, 45,  5, 15);
                timeTable('line_base3', 'clock_area3', 7, 30,  11, 0);
                // clock 4
                timeTable('line_base4', 'clock_area4', 9, 00, 12, 0);
                timeTable('line_base4', 'clock_area4', 1, 0,  3, 30);
                timeTable('line_base4', 'clock_area4', 4, 0,  6, 30);

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--


            .disp_clock {

                margin-top       : 100px;
                margin-left      : 200px;

                width            : 150px;
                height           : 150px;

            }


            .common_line {

                position                 : absolute;

                width                    : 1px;
                height                   : 75px;

                visibility               : hidden;

                -webkit-transform-origin : center 100%;
                -moz-transform-origin    : center 100%;
                -ms-transform-origin     : center 100%;
                -o-transform-origin      : center 100%;
                transform-origin         : center 100%;

            }


            .disp_line1 {
                background-color : #ff0000;
            }

            .disp_line2 {
                background-color : #00ff00;
            }

            .disp_line3 {
                background-color : #0000ff;
            }

            .disp_line4 {
                background-color : #cccccc;
            }


        --></style>

    </head>

        <div id="clock_area1" class="disp_clock">
            <div id="line_base1" class="common_line disp_line1"></div>
        </div>

        <div id="clock_area2" class="disp_clock">
            <div id="line_base2" class="common_line disp_line2"></div>
        </div>

        <div id="clock_area3" class="disp_clock">
            <div id="line_base3" class="common_line disp_line3"></div>
        </div>

        <div id="clock_area4" class="disp_clock">
            <div id="line_base4" class="common_line disp_line4"></div>
        </div>

    </body>
</html>

sample

spmple を表示するとアナログ時計の形式で時間帯を表示出来るようにしました。
一つの時計に複数の時間帯を設定出来るようにしています。
午前午後に分けて表示したいただ事も可能です。

画像を使用していないので数字を変更するだけで時間帯の変更が可能です。
社内の人間が「アナログ時計」を見て「こういったことができるか」と云われて対応してみました。
「他にも出来ればいいな」と思っている人がいれば使っていただければと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です