HTML打折计算价格

浏览数：21 / 时间：2015年06月09日

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3 
 4      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5 
 6   <head>
 7   
 8     <title>打折后价格计算</title>
 9   
10   <!--  设置计算价格事件函数，取不同下拉打折数，计算结果送入文字框-->
11   
12       <script type="text/javascript">
13 
14     function calculator(){
15         var prices=document.getElementById("price");
16         var discounts=document.getElementById("number");
17         var pay;
18         var select=document.getElementById("payfunction");
19         if((prices.value>=0&&!isNaN(prices.value))&&(discounts.value>=0&&!isNaN(discounts.value))&&prices.value!=""&&discounts.value!="")
20         {
21             pay=prices.value*discounts.value;
22             
23             switch(parseInt(select.value)){
24             case 1:pay=pay*0.5; break;
25             case 2:pay=pay*0.8; break;
26             case 3:pay=pay*0.6;    break;
27             }
28             
29             document.getElementById("result").value=pay;
30             alert("恭喜你，交易成功！");
31             
32         }else
33         {
34             prices.focus();
35             prices.select();
36             alert("请输入正确的价格和数量(也不能为空)！");
37         }
38                                                           
39     }
40 
41 
42     </script>
43 
44   
45   </head>
46   
47   <!--  定义界面格式，设置下拉表，设置计算价格事件-->
48   
49 <body>   
50     <center>
51     <form name="discount" action="result.jsp" method="post">
52          竞拍价格：<input type="text" id="price" style="width: 150px"/><br>
53          
54          购买数量：<input type="text" id="number" style="width: 150px"/><br>
55          
56          支付方式：<select id="payfunction" style="width: 150px">
57          <option value="1">网银支付-打5折</option>
58         <option value="2">支付宝支付-打8折</option>
59         <option value="3" selected="true">Q币支付-打6折</option>    
60          </select><br>
61          
62          预计总价：<input type="text" id="result" style="width: 150px"><br>
63          
64          <input type="button" id="allresult"  value="计算总价" onclick="calculator()" /> 
65     </form>
66      </center>
67    
68   </body>
69 </html>