<!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. 进了ACM之后，我才清楚了自己的方向！！！

    2015年8月29日,从郴州比完赛后,状况并没有想象中的乐观,我被卡在了一个数学题上,本来以为这个题目真的是很容易,天真的以为打表就可以敲的出来,可是并没有,横在了一个结束条件上面,比完赛后真想抽自己 ...

  2. SRM 393(1-250pt)

    题意:有m个人投票,每个人在心里对所有候选者排了一个序,比如“210”,则他最想投2号,如果2号已经出局他会投1号,最后投0号,否则弃权不投.选举时进行多轮投票,知道选出winner或者所有人均出局. ...

  3. Java自动装箱和自动拆箱操作

    1.Java数据类型 在介绍Java的自动装箱和拆箱之前,我们先来了解一下Java的基本数据类型. 在Java中,数据类型可以分为两大种,Primitive Type(基本类型)和Reference ...

  4. vue.js学习笔记(一)：什么是mvvm框架，vue.js的核心思想

    一:MVVM框架 MVVM框架的应用场景:  1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...

  5. android——api

    一.1.复用首页做法—从Intent中获取”com.example.android.apis.Path”.根据这个结合PackageManger获得的Activities来展示不同等级的List界面( ...

  6. 单件模式Singleton来控制窗体被重复或多次打开

    本文转载:http://blog.csdn.net/a0700746/article/details/4473796 一般在百度搜一下,会出来一下内容,看来很好用.Singleton很方便的一个用处就 ...

  7. 阿基米德项目ALS矩阵分解算法应用案例

    转自:https://github.com/ceys/jdml/wiki/ALS 阿基米德项目ALS矩阵分解算法应用案例 编写人:ceys/youyis 最后更新时间:2014.5.12 一.算法描述 ...

  8. Linux Kernel: buffers和cached的区别

    The page cache caches pages of files to optimize file I/O. The buffer cache caches disk blocks to op ...

  9. poj2993 poj2669

    扯淡题. 2993 #include <iostream> #include <stdio.h> #include <string> #include <st ...

  10. [转] 学习HTML/JavaScript/PHP 三者的关系以及各自的作用

    1.What is HTML? When you write a normal document using a word processor like Microsoft Word/Office, ...