Cookieを使ったメモと計算　JavaScript編

JavaScript

元記事はこちらです。

■index.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" href="common.css" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="common.js"></script>
</head>
<body>

<table>
    <tr>
        <td colspan="2">&nbsp;</td>
        <th>memo</th>
    </tr>
    <tr>
        <th>
            <input type="text" name="title1" id="title1" size="15" class="t_clr">
        </th>
        <td>
            <input type="text" name="u" id="u" size="10" maxlength="10" class="num">
        </td>
        <td>
            <input type="text" name="memo1" id="memo1" size="30">
        </td>
    </tr>
    <tr>
        <th>
            <input type="text" name="title2" id="title2" size="15" class="t_clr">
        </th>
        <td>
            <input type="text" name="r" id="r" size="10" maxlength="10" class="num">
        </td>
        <td>
            <input type="text" name="memo2" id="memo2" size="30">
        </td>
    </tr>
    <tr>
        <th>
            <input type="text" name="title3" id="title3" size="15" class="t_clr">
        </th>
        <td align="right" id="val3" class="dsp"></td>
        <td>
            <input type="text" name="memo3" id="memo3" size="30">
        </td>
    </tr>
    <tr>
        <th>
            <input type="text" name="title4" id="title4" size="15" class="t_clr">
        </th>
        <td>
            <input type="text" name="k" id="k" size="10" maxlength="10" class="num">
        </td>
        <td>
            <input type="text" name="memo4" id="memo4" size="30">
        </td>
    </tr>
    <tr>
        <th>
            <input type="text" name="title5" id="title5" size="15" class="t_clr">
        </th>
        <td align="right" id="val5" class="dsp"></td>
        <td>
            <input type="text" name="memo5" id="memo5" size="30">
        </td>
    </tr>
    <tr>
        <th>
            <input type="text" name="title6" id="title6" size="15" class="t_clr">
        </th>
        <td align="right" id="val6" class="dsp"></td>
        <td>
            <input type="text" name="memo6" id="memo6" size="30">
        </td>
    </tr>
</table>
<input type="button" value="CALC" id="calc">
</body>
</html>

■common.css

input.num {
    text-align:right;
    }
input.t_clr {
    border: 0;
    background: lightskyblue;
    }
table {
    margin:5px 5px 0px 0px;
    padding:5px 5px 0px 5px;
    border: 1px black solid;
    border-collapse: collapse;
    border-spacing: 0;
    }
table th {
    white-space: nowrap;
    padding: 5px;
    border: black solid;
    border-width: 0 0 1px 1px;
    background: lightskyblue;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
    }
table td {
    white-space: nowrap;
    background: white;
    padding: 5px;
    border: 1px black solid;
    border-width: 0 0 1px 1px;
    }

■common.js

/*==================
初期化
==================*/
$(function () {
    $(":text").each(function() {
        a = getCookie(this.name);
        if(a===''){
            if((this.name==="u")||(this.name==="r")||(this.name==="k")){
                a = 0;
            }else{
                a = this.name;
            }
        }
        $(this).val(a);// input
    });

    $(".dsp").each(function() {
        a = getCookie(this.id);
        if(a===''){
            a = "0";
        }
        $(this).text(a); // td
    });

    $(".num").keyup(function(){
        js_keyChk(this);
    });

    $("#calc").click(function() {
        js_calc();
    });
});

function js_keyChk(obj) {
    var str = obj.value;
    var str2 = "";
    for(i=str.length;i--;) {
        if(str.charCodeAt(i) >= '0'.charCodeAt(0) && str.charCodeAt(i) <= '9'.charCodeAt(0)) {
            str2 = str.charAt(i) + str2;
        }
    }
    obj.value = str2;
}
function js_calc() {
    var mr = Math.ceil($("#r").val() / 10000) * 10000,
        ms = 0,
        m = 0,
        k = $("#k").val(),
        zan = 0,
        tmp = 0;

    zan = $("#u").val() - mr;

    if(zan > k) {
        tmp = zan - k;
        ms = Math.floor(tmp / 10000) * 10000;
    }
    $("#val3").text(addFigure(mr));
    $("#val5").text(addFigure(ms));
    $("#val6").text(addFigure(mr + ms));

    // cookieセット
    $(":text").each(function() {
        tmp = this.value;
        setCookie(this.name, tmp);
    });

    $(".dsp").each(function() {
        tmp = $(this).text();
        setCookie(this.id, tmp);
    });
}
/*====================================================================
http://www.tohoho-web.com/wwwcook3.htm
====================================================================*/
function getCookie(key,  tmp1, tmp2, xx1, xx2, xx3) {
    tmp1 = " " + document.cookie + ";";
    xx1 = xx2 = 0;
    len = tmp1.length;
    while (xx1 < len) {
        xx2 = tmp1.indexOf(";", xx1);
        tmp2 = tmp1.substring(xx1 + 1, xx2);
        xx3 = tmp2.indexOf("=");
        if (tmp2.substring(0, xx3) == key) {
            return(unescape(tmp2.substring(xx3 + 1, xx2 - xx1 - 1)));
        }
        xx1 = xx2 + 1;
    }
    return("");
}
function setCookie(key, val, tmp) {
    tmp = key + "=" + escape(val) + "; ";
    // tmp += "path=" + location.pathname + "; ";
    tmp += "expires=Tue, 31-Dec-2030 23:59:59; ";
    document.cookie = tmp;
}
function clearCookie(key) {
    document.cookie = key + "=" + "xx; expires=Tue, 1-Jan-1980 00:00:00;";
}
/*====================================================================
数字を3桁区切りで表示する
http://sookibizviz.blog81.fc2.com/blog-entry-100.html
====================================================================*/
function addFigure(str) { 
    var num = new String(str).replace(/,/g, ""); 
    while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); 
    return num; 
}