[jQuery] 평수 자동 계산기

이런 스타일의 평수 자동 계산기를 만들기 위해 jQuery를 활용했다. 일단 작동은 제대로 되는 듯 한데.. 역시 허접!!

<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
    <td height=”97″ class=”calc_bg” valign=”top”>
        <table cellpadding=”0″ cellspacing=”0″ border=”0″>
        <tr>
            <td colspan=”4″ height=”31″></td>
        </tr>
        <tr>
            <td width=”20″ height=”17″></td>
            <td width=”38″><input type=”text” name=”vp1″ class=”calc_ed” /></td>
            <td width=”31″></td>
            <td width=”38″><input type=”text” name=”va1″ class=”calc_ed” readonly /></td>
        </tr>
        <tr>
            <td colspan=”4″ height=”17″></td>
        </tr>
        <tr>
            <td height=”16″></td>
            <td><input type=”text” name=”va2″ class=”calc_ed” /></td>
            <td></td>
            <td><input type=”text” name=”vp2″ class=”calc_ed” readonly /></td>
        </tr>
        </table>
    </td>
</tr>
</table>

<script type=”text/javascript”>
$(‘input:text[name=vp1]’).keyup(function() {
        var vp1 = parseInt($(this).val());
        if(vp1 > 0) {
            var va1 = Math.round(vp1 * 3.3058);
            $(‘input:text[name=va1]’).attr(“value”, va1);
        }
});

$(‘input:text[name=va2]’).keyup(function() {
        var va2 = parseInt($(this).val());
        if(va2 > 0) {
            var vp2 = Math.round(va2 / 3.3058);
            $(‘input:text[name=vp2]’).attr(“value”, vp2);
        }
});
</script>

사용하기 전에 jQuery 파일을 불러와줘야 한다.

jQuery를 사용하면 할 수록 참 편하다는 것을 느끼게 된다. 이걸 자바스크립트로 만들려고 했으면 코드도 지저분하고
여러 가지를 생각했어야 하는데.. jQuery로는 너무도 쉽게 해결이 되니까.. 약간은 싱겁다고 해야할까? 뭐 그렇다.

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

카카오톡 플러스친구 채팅 : NCUBE.NET

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.