<!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.onload=function(){
//根据用户的性别相应的显示
document.getElementById("male").onclick=function(){
document.getElementById("man").style.display="block";
document.getElementById("woman").style.display="none";
}
document.getElementById("female").onclick=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").onclick=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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
