タグ別アーカイブ: parseInt

オブジェクトの範囲指定

今回も備忘録的な話です。
jQuery の slice に関して存在は知っていたのですが、使用方法が知っている内容と
違ったため記載しておきます。
・・・ちなみに今までは substr と同様に文字列の切り取りと思ってました(笑)

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

            $(function(){

                // Change Div
                var dataS;
                var dataE;
                $('#set_change').click( function(){
                    dataS = parseInt($('#select_start').val());
                    dataE = parseInt($('#select_end').val()) + 1;
                    $('.target_div').css({'background-color':'#ffffff'}).slice(dataS, dataE).css({'background-color':'#00ffff'});
                });

            });

        --></script>

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

            div {
                margin       : 10px;
            }

            div.target_div {
                width        : 25px;
                height       : 25px;
                line-height  : 25px;
                text-align   : center;
                border       : solid 1px #000000;
                float        : left;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="select_area">
                <select id="select_start">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                </select>
                <select id="select_end">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                </select>
                <button id="set_change">Set Change</button>
            </div>
            <div id="disp_area">
                <div class="target_div">00</div>
                <div class="target_div">01</div>
                <div class="target_div">02</div>
                <div class="target_div">03</div>
                <div class="target_div">04</div>
                <div class="target_div">05</div>
                <div class="target_div">06</div>
                <div class="target_div">07</div>
                <div class="target_div">08</div>
                <div class="target_div">09</div>
            </div>
        </div>

    </body>
</html>

sample

sample では select にて範囲を指定し、button をクリックすることで下部に
用意した div の背景色が変わります。

・・・以外と便利なものですね。
実は今までも、li の n番目から m番目 だけ太字にしたいなどの処理はありました。
その場合 eq や loop処理で対応していたのですが・・・
今後は上手く使用して行きたいですね。

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

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

六耀の計算について(2)

今回も引き続きカレンダーに関する情報です。
前回の内容で六曜を算出するには太陰暦が必要ということがわかりました。
じゃあ調べようということで太陰暦について調べました。

・・・中々複雑なものですねぇ、正直な話、この先十年分のデータを登録しておくほうが現実的な気もします。(笑)
まぁ、なにはともあれ今回は調べて中では一般的?な天保暦もどきで暦変換を試して見ることにします。

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

            $(function() {

                var arrMonthDays   = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
                var arrROKUYOU     = new Array('大安','赤口','先勝','友引','先負','仏滅');
                var arrCahngeTable = new Array();
                var arrDayData     = new Array();
                    arrDayData['2013']         = new Array();
                    arrDayData['2013']['days'] = 533
                    arrDayData['2013']['data'] = 2901
                    arrDayData['2014']         = new Array();
                    arrDayData['2014']['days'] = 412
                    arrDayData['2014']['data'] = 2741
                    arrDayData['2015']         = new Array();
                    arrDayData['2015']['days'] = 650
                    arrDayData['2015']['data'] = 1210
                    arrDayData['2016']         = new Array();
                    arrDayData['2016']['days'] = 507
                    arrDayData['2016']['data'] = 2651
                    arrDayData['2017']         = new Array();
                    arrDayData['2017']['days'] = 369
                    arrDayData['2017']['data'] = 2647
                    arrDayData['2018']         = new Array();
                    arrDayData['2018']['days'] = 611
                    arrDayData['2018']['data'] = 1323
                    arrDayData['2019']         = new Array();
                    arrDayData['2019']['days'] = 468
                    arrDayData['2019']['data'] = 2709
                    arrDayData['2020']         = new Array();
                    arrDayData['2020']['days'] = 329
                    arrDayData['2020']['data'] = 5781


                $('#chackData').click(function () {

                    // Data Get
                    yData = parseInt($('#year option:selected').val());
                    mData = parseInt($('#month option:selected').val());
                    dData = parseInt($('#day option:selected').val());

                    // Data Change
                    //// Count Day
                    cntDays = dData;
                    for (var tempM = 1; tempM < mData; tempM++) {
                        cntDays += arrMonthDays[tempM - 1];
                    }
                    if ((yData % 4) == 0) {
                        if ((yData % 100) == 0) {
                            if ((yData % 400) == 0) {
                                cntDays++;
                            }
                        } else {
                            cntDays++;
                        }
                    }

                    tableSet(yData);
                    if (cntDays < arrCahngeTable[0]['days']) {
                        cntDays += 365;
                        if ((yData % 4) == 0) {
                            if ((yData % 100) == 0) {
                                if ((yData % 400) == 0) {
                                    cntDays++;
                                }
                            } else {
                                cntDays++;
                            }
                        }
                        tableSet((yData - 1));
                    }

                    getMon = 0;
                    getDay = 0;
                    for (var mCnt = 12; mCnt >= 0 ; mCnt--) {
                        if (arrCahngeTable[mCnt]['month'] != 0) {
                            if (arrCahngeTable[mCnt]['days'] <= cntDays) {
                                getMon = arrCahngeTable[mCnt]['month'];
                                getDay = cntDays - arrCahngeTable[mCnt]['days'] + 1;

                                break;
                            }
                        }
                    }
                    if (getMon < 0) {
                        getMon = -getMon;
                    }


                    // Disp Set
                    $('#dispData').text(getMon + '/' + getDay + '(' + arrROKUYOU[(getMon + getDay) % arrROKUYOU.length] + ')');

                });

                function tableSet(yData) {
                
                    tempDays = arrDayData[yData]['days'];
                    tempData = arrDayData[yData]['data'];
                    workDays = Math.floor(tempDays / 13 + 0.001);
                    uruuFlg  = tempDays % 13;
                    if (uruuFlg == 0) {
                        tempData *= 2;
                        maxMonth  = 12;
                    } else {
                        maxMonth  = 13;
                    }

                    arrCahngeTable[0] = new Array();
                    arrCahngeTable[0]['days']  = workDays;
                    arrCahngeTable[0]['month'] = 1;
                    for (var mCnt = 1; mCnt <= maxMonth; mCnt++) {
                        arrCahngeTable[mCnt] = new Array();
                        arrCahngeTable[mCnt]['days']  = arrCahngeTable[mCnt - 1]['days'] + 29;
                        arrCahngeTable[mCnt]['month'] = mCnt + 1;
                        if (tempData >= 4096) {
                            arrCahngeTable[mCnt]['days']++;
                        }
                                                
                        tempData = (tempData % 4096) * 2;
                    }
                    arrCahngeTable[maxMonth]['month'] = 0;

                    if (maxMonth > 12) {
                        for (var mCnt = uruuFlg + 1; mCnt < 13; mCnt++) {
                            arrCahngeTable[mCnt]['month'] = mCnt;
                        }
                        arrCahngeTable[uruuFlg]['month'] = -uruuFlg;
                    } else {
                        arrCahngeTable[13] = new Array();
                        arrCahngeTable[13]['days']  = 0;
                        arrCahngeTable[13]['month'] = 0;
                    }
                    
                }

            });

        --></script>

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

            div {
                margin          : 5px;
            }

        --></style>

    </head>

        <div id="data_area">
            西暦:
            <select id="year" class="dateSelect">
                <option value="2014" selected="selected">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
            </select>
            /
            <select id="month" class="dateSelect">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            /
            <select id="day" class="dateSelect">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option></option>
            </select>
            <button id="chackData">Click Me!!</button>
        </div>

        <div id="disp_area">
            太陰暦:<span id="dispData"></span>
        </div>

    </body>
</html>

sample

sample では指定した日付をに対して、旧暦の月・日を表示するようにしてみました。
それにともなって六曜を表示しています。
太陰暦での月日を算出方法が解れば、後は前回の内容を適用するだけです。

それにしても太陰暦の出し方がこんなに面倒なものだとは思いませんでした。
今回は既に計算済みのデータを使用する簡易版ですが、仮に計算で割り出すにしても何年かするとズレが生じるようです。
そのため、特定の期間しか対応出来ないというものが多いようですね。

今後の業務にて太陰暦を算出する機会が何度あるかわかりませんがとりあえずは対応できそうです。
・・・まぁ、内容は理解しましたし正確なデータが必要な場合はAPIを探して使う方がいいのかもしれません。
どうしようか悩むところではありますねぇ・・・

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

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

六耀の計算について(1)

今回はカレンダーに関する情報です。
カレンダーには「大安」「仏滅」・・・などの「六耀」表示があります。
とりあえず今回は六耀の計算方法を試したいと思います。

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

            $(function() {

                var arrROKUYOU = new Array('大安','赤口','先勝','友引','先負','仏滅');
                $('#chackData').click(function () {
                    $mData = parseInt($('#month option:selected').val());
                    $dData = parseInt($('#day option:selected').val());
                    $('#disp').text(arrROKUYOU[($mData + $dData) % arrROKUYOU.length]);
                });
                $('.selectData').triggerHandler();

            });

        --></script>

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

            div {
                margin          : 5px;
            }

        --></style>

    </head>

        <div id="data_area">
            <select id="month" class="dateSelect">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            /
            <select id="day" class="dateSelect">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option></option>
            </select>
            <button id="chackData">Click Me!!</button>
        </div>

        <div id="disp_area">
            「六耀」:<span id="disp"></span>
        </div>

    </body>
</html>

sample

まず「六耀」を求める手順ですが、大きく分けると2つの工程があるようです
 ・現在の日付を旧暦の日付を取得する。
 ・旧暦の日付から「六耀」を取得する。

今回の処理では旧暦の月・日を指定することで「六耀」が表示されるようにしています。
つまり「2.旧暦の日付から「六耀」を取得する。」の部分ですね。
sample では指定した旧暦の月・日に対応する「六耀」を表示しています。

現在の暦から「六耀」を表示するには一筋縄ではいかないようです。
とりあえずは旧暦に変換する必要がありますが、なんか旧暦っていくつか種類が幾つかあるんですね。
今の暦から旧暦に変更する方法はその調査も踏まえて、また次の機会に行おうと思います。

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

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

色情報の表記変更

前回「簡易カラーピッカー」を作成しました。
後から確認したところ $(this).css(‘background-color’); で背景色を取得した場合、
ブラウザによって取得する文字列が異なるようです。

取得内容をそのまま背景色に設定する分には問題ないのだと思います。
しかし、文字列を表示する場合はクロスブラウザ対策をしないといけないようです。

ということで今回は色情報取得時のクロスブラウザ対策をしてみます。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
         
        <script type="text/javascript"><!--
            $(function() {

                var colorData;
                var colorChangeData;
                // Color List Display
                function SetColorList(type) {
                    // Color List Clear
                    $('#select_area').empty;

                    // rData
                    for (var r=0; r<16; r = r + 2) {
                        // gData
                        for (var g=0; g<16; g = g + 2) {
                            // bData
                            for (var b=0; b<16; b = b + 2) {
                                // Color Set
                                colorData = parseInt(r).toString(16) + parseInt(g).toString(16) + parseInt(b).toString(16);
                                $('#select_area').append('<div class="color_box" style="background-color:#' + colorData + ';"></div>');
                            }
                        }
                        $('#select_area').append('<div class="float_both"></div>');
                    }

                    // Color Click
                    $('.color_box').click(function (e) {
                        // Get Color Data
                        colorData = $(this).css('backgroundColor');
                        // Date Set
                        $('#color_disp span').replaceWith('<span>' + colorData + '</span>');
                        $('#color_disp').css('backgroundColor', colorData);

                        // New
                        colorChangeData = '';
                        if (colorData.substr(0,1) == '#') {
                            // Opera (#ffffff)
                        } else {
                            // Etc (rgb(255, 255, 255))
                            // 
                            colorData = colorData.replace('rgb(', '');
                            colorData = colorData.replace(')', '');
                            //
                            arrColor  = colorData.split(',');
                            for (var cnt=0; cnt<=2; cnt++) {
                                arrColor[cnt] = parseInt(arrColor[cnt]).toString(16);
                                if (arrColor[cnt].length < 2) {
                                    arrColor[cnt] = '' + '0' + arrColor[cnt];
                                }
                            }
                            colorChangeData = '#' + arrColor[0] + arrColor[1] + arrColor[2];
                        }
                        $('#color_text span').replaceWith('<span><p>' + colorData + '</p><p> ↓ Change</p><p>' + colorChangeData + '</p></span>');

                    });

                }

                // init
                SetColorList();

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

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #disp_area p {
                padding          : 10px;
            }

            #select_area {
                margin           : 10px;
                padding          : 20px;
            }

            .color_box {
                float            : left;
                height           : 15px;
                width            : 15px;
                margin           : 0;
                padding          : 0;
            }

            .float_both {
                clear            : both;
            }

        --></style>
         
    </head>
    <body>
        <div id="select_area">
        </div>
        <div id="disp_area">
           <div id="color_disp">
               <span></span>
           </div>
           <div id="color_text">
               <span></span>
           </div>
        </div>
    </body>
</html>

sample

sanple 内容は基本的に 「簡易カラーピッカー」 のままです。
但し、色を選択したときの取得文字列を #ffffff での表示に変更しました。

今回のクロスブラウザ対策は以下の状況を共通の形式にするための処理です。
例)
■取得時
 Opera #ffffff
 その他 rgb(255,255,255)
 ↓
■返還後
 全ブラウザ #ffffff

正直 Opera 利用者の割合とか考えると必要かなぁとは思います。
ですが Opera 対策というよりも #ffffff の形式のほうが好みなので対応したほうがいいですね。

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

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

簡易カラーピッカー

今回は簡易的なカラーピッカーを作ってみました。
・・・あくまでも簡易版です。
まぁ「こんな事できますよ」の確認ですね

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
         
        <script type="text/javascript"><!--
            $(function() {

                var colorData;
                // Color List Display
                function SetColorList(type) {
                    // Color List Clear
                    $('#select_area').empty;

                    // rData
                    for (var r=0; r<16; r = r + 2) {
                        // gData
                        for (var g=0; g<16; g = g + 2) {
                            // bData
                            for (var b=0; b<16; b = b + 2) {
                                // Color Set
                                colorData = parseInt(r).toString(16) + parseInt(g).toString(16) + parseInt(b).toString(16);
                                $('#select_area').append('<div class="color_box" style="background-color:#' + colorData + ';"></div>');
                            }
                        }
                        $('#select_area').append('<div class="float_both"></div>');
                    }

                    // Color Click
                    $('.color_box').click(function (e) {
                        // Get Color Data
                        colorData = $(this).css('backgroundColor');
                        // Date Set
                        $('#color_disp span').replaceWith('<span>' + colorData + '</span>');
                        $('#color_disp').css('backgroundColor', colorData);
                    });

                }

                // init
                SetColorList();

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

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #select_area {
                margin           : 10px;
                padding          : 20px;
            }

            .color_box {
                float            : left;
                height           : 15px;
                width            : 15px;
                margin           : 0;
                padding          : 0;
            }

            .float_both {
                clear            : both;
            }

        --></style>
         
    </head>
    <body>
        <div id="disp_area">
           <div id="color_disp">
               <span></span>
           </div>
        </div>
        <div id="select_area">
        </div>
    </body>
</html>

sample

表示された色を選択すると、指定した色の取得をします。

まぁ、簡単に色指定をすることはできるようなので、画面の中の文字色や背景色を変更できるようになります。
本当は RGB に各255,255,255 での色を表示しようかと思いましたが色数がすさまじくなります・・・
そのため、今回は色数を制限しています。

まぁ、色数もそう問題かと思うんですが、色の表示順はどうするのが理想なんでしょうか。
自動で並べる場合は考える必要がありますね。
色の表示順に関しては配列情報を事前登録しておくことが理想なんでしょうか。

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

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