<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">
<!--
function clickSex(ctype){
if(ctype=="man"){
document.getElementById("man").style.display="block";
document.getElementById("miss").style.display="none";
}
if(ctype=="miss"){
document.getElementById("man").style.display="none";
document.getElementById("miss").style.display="block";
}
}

function isOK(){
return confirm("是否确认提交数据？");
}

function getResult(){
var sex1=document.getElementById("sex1").checked;
var sex2=document.getElementById("sex2").checked;
var yourmoney=document.getElementById("yourmoney").value;
var yoursmoke=document.getElementById("yoursmoke").value;
var yourwine=document.getElementById("yourwine").value;
var yourface=document.getElementById("yourface").value;
var yourclothe=document.getElementById("yourclothe").value;
var result=0;
if(sex1==true){
result=yourmoney-yoursmoke-yourwine;
}
if(sex2==true){
result=yourmoney-yourface-yourclothe;
}
return result;
}

function outPrint(name,age,money,result){
var str=name+"，您好！<br>您现在"+age+"岁<br>您的月收入为："+money+"<br>您月结余为："+result+"<br>谢谢参与！";
document.write(str);
}

function mainClick(){
var isok=isOK();
if(isok==true){
var yourname=document.getElementById("yourname").value;
var yourage=document.getElementById("yourage").value;
var yourmoney=document.getElementById("yourmoney").value;
var yourresult=getResult();
outPrint(yourname,yourage,yourmoney,yourresult);
}
}

//-->
</script>

</head>

<body>

<form name="myform">
性别：
<input type="radio" id="sex1" name="sex" value="先生" onclick="clickSex('man')">男&nbsp&nbsp;
<input type="radio" id="sex2" name="sex" value="小姐" onclick="clickSex('miss')">女<br/>
姓名：</br>
<input type="text" id="yourname" name="yourname" value=""><br/>
年龄：</br>
<input type="text" id="yourage" name="yourage" value=""><br/>
月收入：</br>
<input type="text" id="yourmoney" name="yourmoney" value=""><br/>
<div id="man" style="display:none"> <!--隐藏-->
月抽烟花费：</br>
<input type="text" id="yoursmoke" name="yoursmoke" value=""><br/>
月喝酒花费：</br>
<input type="text" id="yourwine" name="yourwine" value=""><br/>
</div>
<div id="miss" style="display:none">
月美容花费：</br>
<input type="text" id="yourface" name="yourface" value=""><br/>
月购置衣物花费：</br>
<input type="text" id="yourclothe" name="yourclothe" value=""><br/>
<hr/>
</div>
<input type="button" value="提交" onclick="mainClick()">
<input type="reset" value="重填">
</form>

</body>
</html>

DIV隐藏与重显的更多相关文章

  1. 点击一个div隐藏另一个div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  3. jQuery实现鼠标点击div外的地方div隐藏消失的效果（转）

    转:https://www.cnblogs.com/jsingleegg/p/3456152.html css部分: <style type="text/css">.p ...

  4. 常见问题1：默认div隐藏，点击按钮时出现，再点击时隐藏。

    例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...

  5. jQuery实现鼠标点击div外的地方div隐藏消失的效果

    css部分: <style type="text/css"> .pop { width:200px; height:130px; background:#080;} & ...

  6. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  7. Html 使用技巧 -- 设置display属性可以使div隐藏后释放占用的页面空间

         div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;" document.getElemen ...

  8. div 隐藏和显示

    转自:http://aideehorn.iteye.com/blog/417558 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visib ...

  9. div隐藏与显示

    <input type="button" value="隐藏详情" class="jishu_n_k1_input2" id=&quo ...

随机推荐

  1. foxmail邮箱在代理环境下不能使用解决方法。

    由于工作原因,在域环境中但是还不是域用户,怎么设置代理也不能使用邮件客户端,幸亏老大给一软件,如下图 安装超级简单,而且软件很小,安装完后重启,基本不用设置就可以使用,前提是你的邮箱客户端要设置代理服 ...

  2. C# 匿名方法 委托 Action委托 Delegate委托

    原文地址:https://msdn.microsoft.com/zh-cn/library/bb882516.aspx 匿名函数是一个“内联”语句或表达式,可在需要委托类型的任何地方使用. 可以使用匿 ...

  3. C基本语句测试

  4. Java Spring的 JavaConfig 注解

    序 传统spring一般都是基于xml配置的,不过后来新增了许多JavaConfig的注解.特别是springboot,基本都是清一色的java config,不了解一下,还真是不适应.这里备注一下. ...

  5. java随机数与数组的使用。

    java随机数与数组的使用.    一:题目 二 代码:  public class Students {    int number;  // 学号    int State ;   // 年级   ...

  6. 一个IT男的创业感言

    2014年的一月 我和高中的一个同学開始人生的第一次创业.就写点第一次创业的经验吧! 创业的最初 须要心中大概有个规划 这个规划可能是非常粗糙的 但大的方向一定要有.详细就是你进入的行业 行业已经存在 ...

  7. Android ViewPager FragmentPagerAdapter

    ViewPager  里面放Fragment <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/and ...

  8. Entity Framework CodeFirst------数据迁移（二）

    众所周知当我们的项目涉及到数据库时,随着需求或大或小的 变更后,我们之前设计好的数据模型会发生部分的更改,导致数据表.或者数据字段的增加.修改等,这个时候我们就需要对数据库结构进行修改,如果我们之前采 ...

  9. Android（java）学习笔记238：多媒体之图片画画板案例

    1.首先我们编写布局文件activity_main.xml如下: <RelativeLayout xmlns:android="http://schemas.android.com/a ...

  10. ASP.NET 实现上一篇文章 下一篇文章

    select top 1 * from job_hrnews where newsid>162  --下一篇 select top 1 * from job_hrnews where newsi ...