<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>
<title> New Document </title>
<meta content="text/html;charset=gbk"> <script type="text/javascript"> window.οnlοad=function(){ //根据用户的性别相应的显示 document.getElementById("male").οnclick=function(){ document.getElementById("man").style.display="block"; document.getElementById("woman").style.display="none"; } document.getElementById("female").οnclick=function(){ document.getElementById("woman").style.display="block"; document.getElementById("man").style.display="none"; } //计算结果的函数 function getResult(){ //用变量存储复选框被选择的情况,得到布尔型值 var sex1=document.getElementById("male").checked; var sex2=document.getElementById("female").checked; var yourmoney=document.getElementById("yourmoney").value; if(sex1){ var yoursmoke=document.getElementById("yoursmoke").value; var yourdrink=document.getElementById("yourdrink").value; } else{ var yourface=document.getElementById("yourface").value; var yourcloth=document.getElementById("yourcloth").value; } var result=0; if(sex1){ result=yourmoney-yoursmoke-yourdrink; }else if(sex2){ result=yourmoney-yourface-yourcloth; } return result; } function showResult(name,age,money,result){ var str=name+"您好,您的年龄是"+age+",您的月收入是"+money+".<br>根据计算您的月结余为"+result+",感谢参与!"; var div=document.createElement("div"); div.innerHTML=str; document.body.appendChild(div); } document.getElementById("submit").οnclick=function(){ var isok=confirm("是否确认提交数据?点【确定】提交,点【取消】放弃"); if(isok){ var name=document.getElementById("name").value; var age=document.getElementById("age").value; var yourmoney=document.getElementById("yourmoney").value; var yourresult=getResult(); showResult(name,age,yourmoney,yourresult); } } } </script>
</head>
<body> <form> 性别:<input type="radio" name="sex" id="male">男 <input type="radio" name="sex" id="female">女<br> 姓名:<input type="text" id="name" value=""><br> 年龄:<input type="text" id="age" value=""><br> 月收入:<input type="text" id="yourmoney" value=""><br> <div id="man" style="display:none"> 月抽烟花费:<input type="text" id="yoursmoke" value=""><br> 月喝酒花费:<input type="text" id="yourdrink" value=""><br> </div> <div id="woman" style="display:none"> 月美容花费:<input type="text" id="yourface" value=""><br> 月购置衣物花费:<input type="text" id="yourcloth" value=""><br> </div> <hr /> <input type="button" id="submit" value="提交"><input type="reset" value="重置"><br> </form> </body></html>