JavaScript中自定義函數以及文本框、radio、下拉框的值的獲取,結合淘寶競拍案例來理解。。。
阿新 • • 發佈:2018-04-23
支付寶 價格 select back html alt 文本框 lec 獲取
- 淘寶競拍案例:
HTML部分代碼:
<form action="#" method="post"> <h2>歡迎進入淘寶競拍</h2> <h3>本次拍賣品為:導盲犬</h3> 底價: <input type="text" id="Price" value="2000" /><br/><br/> 加價: <input type="text" id="AddPrice" /><br/> <span id="span2"></span><br/> 數量: <input type="text" id="num" /><br/> <span id="span3"></span><br/> 性別: <input type="radio" id="sex1" name="sex" checked="checked"/>男 <input type="radio" id="sex2" name="sex" />女<br/><br/> 付款方式: <select id="Pay1"> <option>微信支付</option> <option>支付寶支付</option> <option>銀聯支付</option> <option>QQ支付</option> <option>刷卡支付</option> </select><br/> <span id="span1" ></span><br/> 總價: <input type="text" id="TotalPrice" /><br/><span id="span5" ></span><br/> <input type="button" value="確認" name="dj" onclick="Pay()" /> </form>
JavaScript部分代碼:
1 <script type="text/javascript"> 2 function Pay(){ 3 var Price=2000; 4 var AddPrice = document.getElementById("AddPrice").value; 5 if(AddPrice=="") 6 { 7 document.getElementById("span2").innerHTML=‘<font color="red">親,請輸入加的價格哦</font>‘; 8 } 9 var num = document.getElementById("num").value; 10 if(num=="") 11 { 12 document.getElementById("span3").innerHTML=‘<font color="red">親,請輸入您要拍的數量哦</font>‘; 13 } 14 var sex = sex1.checked ? ‘男‘ : ‘女‘; 15 var totalMoney; 16 var Pay1 = document.getElementById("Pay1"); 17 var index = Pay1.selectedIndex; 18 switch(index) { 19 case 0: 20 document.getElementById("span1").innerHTML=‘<font color="red">微信支付打九折</font>‘; 21 totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9; 22 break; 23 case 1: 24 document.getElementById("span1").innerHTML=‘<font color="red">支付寶支付打八折</font>‘; 25 totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.8; 26 break; 27 case 2: 28 document.getElementById("span1").innerHTML=‘<font color="red">銀聯支付打七折</font>‘; 29 totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.7; 30 break; 31 case 3: 32 document.getElementById("span1").innerHTML=‘<font color="red">QQ支付打九折</font>‘; 33 totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9; 34 break; 35 case 4: 36 document.getElementById("span1").innerHTML=‘<font color="red">刷卡支付不打折</font>‘; 37 totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num); 38 break; 39 default:document.getElementById("span1").innerHTML=‘<font color="red" >親,支付方式可以進行選擇的呦</font>‘; 40 } 41 if(totalMoney==undefined) 42 { 43 document.getElementById("span5").innerHTML=‘<font color=red>總價無法計算呦</font>‘; 44 }else 45 { 46 document.getElementById("TotalPrice").value=totalMoney; 47 } 48 49 } 50 51 </script>
運行結果圖:
JavaScript中自定義函數以及文本框、radio、下拉框的值的獲取,結合淘寶競拍案例來理解。。。