HTML打折計算價格

時間 2020-09-14

標籤 html 打折計算價格欄目 HTML 简体版

原文原文鏈接

 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>