2018년 3월 18일 일요일

전기 사용요금 html&javascript

            댓글 없음    
<!DOCTYPE html>

<html>

    <head>

        <title>전기 요금</title>

        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <style>
            div {
                width: 850px; height: 750px;
                border: 20px solid black;
            }
          
            p {
                text-align:right;
                font-size: 25px;
            }
          
            input[type=text] {
                color : blue;
                font-size: 30px;
                width: 100px;
            }
            input[type=button]{
                color : white;
                background-color : black;
                font-size: 30px;
                font-weight:bold;
            }
        </style>
        <script>

            $(document).ready(function () {

                $('h1').css('color', 'red');

                $('h1').css('font-size', '4em');

                $('#head_title').css('color', 'orange');

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

                    var kwhtex = 0;

                    var payBasic = 0;

                    var foundation = 0;

                    var elecCharge = 0;

                    var total = 0;

                    var def = 0;

                    var vat = 0;

                    var kwh = 0;

                    var v1 = $('#value1').val()

                    $('#result').css('color', 'red');

                    $('#result').css('font-size', '5em');

                    if (v1 < 201) {

                        payBasic   = 910;

                        def        = 93.3;

                        kwhtex     = Math.floor((v1 * def));

                        elecCharge = Math.floor(payBasic + kwhtex);

                        vat        = Math.round(0.1 * (kwhtex + payBasic));

                        foundation = Math.floor(((0.037 * (kwhtex + payBasic)) / 10) * 10);

                        total      = Math.floor(((elecCharge + vat + foundation) / 10) * 10);



                    } else if (v1 > 200 && v1 < 401) {

                        payBasic   = 1600;

                        def        = 187.9;

                        v1         = v1 - 200;

                        kwhtex     = Math.floor(18660 + (v1 * def));

                        elecCharge = Math.floor(payBasic + kwhtex);

                        vat        = Math.round(0.1 * (kwhtex + payBasic));

                        foundation = Math.floor(((0.037 * (kwhtex + payBasic)) / 10) * 10);

                        total      = Math.floor(((elecCharge + vat + foundation) / 10) * 10);


                    } else if (v1 > 400 && v1 < 9999999) {

                        payBasic   = 7300;

                        def        = 280.6;

                        v1         = v1 - 400;

                        kwhtex     = Math.floor((56240 + (v1 * def)));

                        elecCharge = Math.floor(payBasic + kwhtex);

                        vat        = Math.round(0.1 * (kwhtex + payBasic));

                        foundation = Math.floor(((0.037 * (kwhtex + payBasic)) / 10) * 10);

                        total      = Math.floor(((elecCharge + vat + foundation) / 10) * 10);



                    } else {

                        alert('올바른 숫자를 입력하세오')

                    }
                        $('#ppayBasic').html(Number(kwhtex));;

                        $('#pkwhtex').html(Number(elecCharge));;

                        $('#pelecCharge').html(Number(vat));;

                        $('#pvat').html(Number(foundation));;

                        $('#pfoundation').html(Number(total));;
                      
                        $('#ptotal').html(Number(total));;

                });

            });
        </script>

    </head>

    <body>
      <center>
        <div>
        <form>
            <h1>전기 사용 요금 계산기</h1>

            <input type="text" id="value1"/>

            <input type="button" value="계산" id="btn"/>

        </form>
      
        <br/>
      
        <table border = "1" width = "400" height = "500">
            <tr>
                <th width = "150"> 기본 요금 </th>
                <th><p id="ppayBasic"></span></th>
            </tr>
            <tr>
                <th> 전력량 요금 </th>
                <th><p id="pkwhtex"></p></th>
            </tr>
            <tr>
                <th> 전기 요금계 </th>
                <th><p id="pelecCharge"></p></th>
            </tr>
            <tr>
                <th> 부가세 </th>
                <th><p id="pvat"></p></th>
            </tr>
            <tr>
                <th> 기반 기금 </th>
                <th><p id="pfoundation"></p></th>
            </tr>
            <tr>
                <th> 청구 금액 </th>
                <th><p id="ptotal"></p></th>
            </tr>
        </table>
      
        </div>
      </center>
    </body>

</html>
Share:

0 개의 댓글:

댓글 쓰기

Scroll To Top