<!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. [Audio processing] Harmonic change detection function (HCDF)

    Harmonic change detection function (HCDF) 是根据 Tonal Centroid (TC)实现的,首先TC如何提取? Step 1. 提取PCP特征 Step ...

  2. java迭代器demo

    package cn.aust.zyw.demo; import java.util.Iterator; /** * Created by zyw on 2016/2/16. * Iterator模式 ...

  3. DNA Sequence - POJ 2778（AC自动机+矩阵乘法）

    题目大意:DNA序列是有 ATGC 组成的,现在知道一些动物的遗传片段有害的,那么如果给出这些有害的片段,能否求出来所有长度为 N 的基因中有多少是不包含这些有害片段的.   分析:也是断断续续做了一 ...

  4. G - Supermarket poj1456

    题目的描述很长,其实描述的问题很简单,说有n的商品,它们每个的价值是pi,但是呢,再过di天这些商品就不能卖了(有可能过期了...),现在给出来每个商品的价值和可以卖的最后期限,问可以得到最多多少资金 ...

  5. E - 食物链 poj1182

    题目告诉有  3  种动物,互相吃与被吃,现在告诉你  m  句话,其中有真有假,叫你判断假的个数  (  如果前面没有与当前话冲突的,即认为其为真话  ).每句话开始都有三个数 D A B,当D = ...

  6. 理解RESTful架构(转)

    理解RESTful架构   作者: 阮一峰 http://www.ruanyifeng.com/blog/2011/09/restful 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这 ...

  7. logback 配置详解（一）（转）

    转自:http://blog.csdn.net/haidage/article/details/6794509/ 一:根节点<configuration>包含的属性: scan: 当此属性 ...

  8. 第二篇：基于K-近邻分类算法的约会对象智能匹配系统

    前言 假如你想到某个在线约会网站寻找约会对象,那么你很可能将该约会网站的所有用户归为三类: 1. 不喜欢的 2. 有点魅力的 3. 很有魅力的 你如何决定某个用户属于上述的哪一类呢?想必你会分析用户的 ...

  9. [转] 【开源访谈】Muduo 作者陈硕访谈实录

    关于开源访谈 开源访谈是开源中国推出的一系列针对国内优秀开源软件作者的访谈,以文字的方式记录并传播.我们希望开源访谈能全面的展现国内开源软件.开源软件作者的现状,着实推动国内开源软件的应用与发展. [ ...

  10. Dagger2学习之由浅入深

    概述 Dagger2是一款使用在Java和Android上的静态的,运行时依赖注入框架.官方地址:http://google.github.io/dagger/ 记得当初刚学习Dagger2的时候看了 ...