问题描述：
界面：
交互：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
font-family: 宋体;
font-size: 20px;
font-weight: bold;
}
input,select{
border-color: #87CEFA;
border-width: 1px;
padding: 2px;
}
</style>
<script language="javascript">
function func(){
var price = parseInt(document.myform.price.value);
var number = parseInt(document.myform.number.value);
var str = document.myform.way_of_pay.value;
var discount =0;
switch(str){
case "bank":discount = 0.6;break;
case "phone":discount = 0.7;break;
case "postpay":discount = 0.8;break;
case "Qbi":discount = 0.9;break;
default:
{
alert("购买数量或价格没有填写\n请重新输入！");
return;
}
}
price = price*number*discount;
document.getElementById("sum_price").value = price;
}
</script>
</head>
<body>
<div>
<img src="img/logo.gif" />
<p>会说话的QQ竞拍喽！</p>
<img src="img/qie.jpg" />
<form id="myform" name="myform" method="post" action="">
<table>
<tr>
<td class="words">拍卖价格：</td>
<td>
<input type="text" id="price" name="price" size="10" maxlength="10" />
</td>
</tr>
<tr>
<td class="words">购买数量：</td>
<td>
<input type="text" id="number" name="number" size="10" maxlength="10" />
</td>
</tr>
<tr>
<td class="words">支付方式：</td>
<td>
<select id="way_of_pay" name="way_of_pay" required="required">
<option value="nochoice" selected="selected">--请选择支付方式--</option>
<option value="bank">银行转账</option>
<option value="phone">电话支付</option>
<option value="postpay">邮政汇款</option>
<option value="Qbi">Q币支付</option>
</select>
</td>
</tr>
<tr>
<td class="words">预计总价：</td>
<td>
<input type="text" id="sum_price" name="sum_price" readonly="readonly" size="20" />
</td>
</tr>
<tr>
<td>
<input type="button" id="caculate" name="caculate" value="计算看看" οnclick="func()" style="margin-top: 15px;width:70px; height:30px;"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
