タグ別アーカイブ: slice

数値の0埋め

今回は備忘録的な内容です。
よくやる内容ではあるのですが「0埋め」処理です。
「0パディング」とも言いますね。

Javascriptで配列情報を操作する際には数値が理想なのかもしれません。
ただ、情報元のキーを考えると、あえて「0埋め」することがあったりします。
また、日時の表示にはよく使う内容です。
今回はそういう場合の覚書です。

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#button').click( function() {
                    var setNum = $('#number').val();
                    var setPad = ($('#left_pad').val() * -1);
                    if ( $('#left_pad').val() > setNum.length) {
                        setNum = ( '000000000' + setNum ).slice( setPad );
                    }
                    $('#dispNum').html( setNum );
                });

            });


        --></script>

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

            div {
                margin : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">
            <div id="disp_area">
                <span id="dispNum">0</span>
            </div>
            <div id="input_area">
                <input id="number" type="text" value="0">
                <select id="left_pad">
                    <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>
                </select>
                <button id="button">click</button>
            </div>
        </div>

    </body>
</html>

sample

sample を click すると数字が表示されています。
button がありますが culick すると数字が「0埋め」されて表示されます。

特に特別難しい訳ではありませんが、忘れやすいので改めて記載しておきます。

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

オブジェクトの範囲指定

今回も備忘録的な話です。
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 人がこの 投稿 は役に立ったと言っています。

文字列を切り取って表示

今回は説明文などの概要の表示です。
全文が指定の文字数より長い場合には、指定文字数に切り取って表示してみます。

<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(){

                max_length = 10;
                $('#input_text').keyup(function () {

                    wText = $(this).val();
                    if (max_length < wText.length) {
                        wText = wText.slice(0, max_length) + '...';
                    }

                    $('#disp_text').empty().append(wText);
                });

            });

        --></script>

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

            #main_area {
                margin              : 10px;
            }

            #input_text {
                width               : 400px;
            }

            #disp_text {
                width               : 400px;
                background-color    : #ccffcc;
                padding             : 2px;
                margin-top          : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="input_text"></textarea>
            <div id="disp_text"></div>
        </div>

    </body>
</html>

sample

sample で text に文字列を入力すると、10文字以上になった場合に
省略表示を行い、末尾に「…」を追加して表示します。

普段は php で文字列の処理を行っていますが、実際に jQuery で文字列の
切り取りができれば、以前の記事なども対応できます。
意外と色々できそうですね。

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

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