HTML打折計算價格實現(xiàn)原理與腳本代碼

字號:


    代碼如下:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <head>
    <title>打折后價格計算</title>
    <!-- 設(shè)置計算價格事件函數(shù),取不同下拉打折數(shù),計算結(jié)果送入文字框-->
    <script type="text/javascript">
    function calculator(){
    var prices=document.getElementById("price");
    var discounts=document.getElementById("number");
    var pay;
    var select=document.getElementById("payfunction");
    if((prices.value>=0&&!isNaN(prices.value))&&(discounts.value>=0&&!isNaN(discounts.value))&&prices.value!=""&&discounts.value!="")
    {
    pay=prices.value*discounts.value;
    switch(parseInt(select.value)){
    case 1:pay=pay*0.5; break;
    case 2:pay=pay*0.8; break;
    case 3:pay=pay*0.6; break;
    }
    document.getElementById("result").value=pay;
    alert("恭喜你,交易成功!");
    }else
    {
    prices.focus();
    prices.select();
    alert("請輸入正確的價格和數(shù)量(也不能為空)!");
    }
    }
    </script>
    </head>
    <!-- 定義界面格式,設(shè)置下拉表,設(shè)置計算價格事件-->
    <body>
    <center>
    <form name="discount" action="result.jsp" method="post">
    競拍價格:<input type="text" id="price"/>
    購買數(shù)量:<input type="text" id="number"/>
    支付方式:<select id="payfunction">
    <option value="1">網(wǎng)銀支付-打5折</option>
    <option value="2">支付寶支付-打8折</option>
    <option value="3" selected="true">Q幣支付-打6折</option>
    </select>
    預(yù)計總價:<input type="text" id="result">
    <input type="button" id="allresult" value="計算總價" onclick="calculator()" />
    </form>
    </center>
    </body>
    </html>