<!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. 开源库CImg 数据格式存储之二(RGB 顺序)

    在上一篇博客中已经初步说明了GDI和CImg数据的存储格式感谢博友 Imageshop 评论说明 CImg的说明文档中已有详细说明(详见上篇博客说明) CImg的数据格式确实是RRRGGGBBB顺序存 ...

  2. HDOJ(HDU) 2143 box(简单的多次判断-用的卫条件)

    Problem Description One day, winnie received a box and a letter. In the letter, there are three inte ...

  3. MySQL客户端执行外部sql文件命令

    客户端 source d:\bbs.sql 或者 \.  d:\bbs.sql

  4. [Locked] Sparse Matrix Multiplication

    Given two sparse matrices A and B, return the result of AB. You may assume that A's column number is ...

  5. 《Mathematical Olympiad——组合数学》——操作和游戏

    这篇文章,我们开始对奥数中有关操作和游戏的问题进行分析和讨论,其实在信息学竞赛中涉及到的一些博弈问题(分析必胜策略)的问题(例如巴什博弈.尼姆博弈),本质上来讲,就是组合数学当中的组合游戏,并不是真正 ...

  6. Apache HBase 2015年发展回顾与未来展望

    编者按:高可用架构推出 2015 年度回顾系列文章,分享在架构领域具有典型意义的年度案例,本文由张虔熙分享.转载请注明来自高可用架构公众号「ArchNotes」.   张虔熙,Hulu 网,专注于分布 ...

  7. 在eclipse下编译hadoop2.0源码

    Hadoop是一个分布式系统基础架构,由apache基金会维护并更新.官网地址: http://hadoop.apache.org/ Hadoop项目主要包括以下4个模块: Hadoop Common ...

  8. 在树莓派1B上编译安装lnmp服务器

    最近一周给部门内部搭建考试系统,选择使用PHPEMS.这是个开源的系统,唯一缺点是PHP的版本比较低,只能使用5.2或5.3.而我的树莓派系统更新后使用apt-get安装得到的PHP版本为5.4.由于 ...

  9. C#修饰符

    声明类的顺序: 访问修饰符+类修饰符 +class+类名 { 成员修饰符+ 成员类型 +成员名称; } C#中类及类型成员权限访问修饰符有以下四类:public,private,protected,i ...

  10. [WebStrom] Change default cmd to Cygwin

    GO to setting, search Terminal: Change shell path : C:\cygwin\bin\bash.exe --login -i    (to the loc ...