<html>
<head> <meta charset="UTF-8" /> <title>模仿手机充值界面</title> <style type="text/css"> html,body{ width:100%; } .container{ width:400px; height:200px; margin: 0 auto; } .container table{border-collapse:collapse;} .container td{ border-collapse:collapse; border:1px solid black; text-align: center; } </style> </head>
<body> <div class="container"> <form> <table> <tr> <td colspan="2">在线手机充值业务(95折)</td> </tr> <tr> <td>充值的手机号码：</td> <td><input type="text" name="phone" value="" id="phone" /></td> </tr> <tr> <td colspan="2"> <input type="radio" name="money" value="30" onclick="mySelect(this.value)" />30 <input type="radio" name="money" value="50" onclick="mySelect(this.value)" />50 <input type="radio" name="money" value="100" onclick="mySelect(this.value)" />100 </td> </tr> <tr> <td>折后价</td> <td id="price"></td> </tr> <tr> <td colspan="2"><input type="submit" name="" value="充值" onclick="tijiao()" /></td> </tr> </table> </form> </div> </body>
<script type="text/javascript"> function tijiao(){ var phone = document.getElementById("phone"); var money = document.getElementById("price"); alert("你要给手机号" + phone.value + "充值" + money.innerHTML + "元吗？"); }
function mySelect(select){ var price = document.getElementById("price"); price.innerHTML = select*0.95; }</script></html>
添加回答
举报
0/150
提交
取消