JavaScript中自定义函数以及文本框、radio、下拉框的值的获取,结合淘宝竞拍案例来理解。。。

时间:2024-12-28 08:04:07
  1. 淘宝竞拍案例:

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部分代码:

     <script type="text/javascript">
function Pay(){
var Price=2000;
var AddPrice = document.getElementById("AddPrice").value;
if(AddPrice=="")
{
document.getElementById("span2").innerHTML='<font color="red">亲,请输入加的价格哦</font>';
}
var num = document.getElementById("num").value;
if(num=="")
{
document.getElementById("span3").innerHTML='<font color="red">亲,请输入您要拍的数量哦</font>';
}
var sex = sex1.checked ? '男' : '女';
var totalMoney;
var Pay1 = document.getElementById("Pay1");
var index = Pay1.selectedIndex;
switch(index) {
case 0:
document.getElementById("span1").innerHTML='<font color="red">微信支付打九折</font>';
totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9;
break;
case 1:
document.getElementById("span1").innerHTML='<font color="red">支付宝支付打八折</font>';
totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.8;
break;
case 2:
document.getElementById("span1").innerHTML='<font color="red">银联支付打七折</font>';
totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.7;
break;
case 3:
document.getElementById("span1").innerHTML='<font color="red">QQ支付打九折</font>';
totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9;
break;
case 4:
document.getElementById("span1").innerHTML='<font color="red">刷卡支付不打折</font>';
totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num);
break;
default:document.getElementById("span1").innerHTML='<font color="red" >亲,支付方式可以进行选择的呦</font>';
}
if(totalMoney==undefined)
{
document.getElementById("span5").innerHTML='<font color=red>总价无法计算呦</font>';
}else
{
document.getElementById("TotalPrice").value=totalMoney;
} } </script>

运行结果图:

JavaScript中自定义函数以及文本框、radio、下拉框的值的获取,结合淘宝竞拍案例来理解。。。

JavaScript中自定义函数以及文本框、radio、下拉框的值的获取,结合淘宝竞拍案例来理解。。。

JavaScript中自定义函数以及文本框、radio、下拉框的值的获取,结合淘宝竞拍案例来理解。。。