<!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. jdk环境变量配置方法

    jdk环境变量配置方法: 在安装完jdk后,还需要对jdk的环境变量进行配置才能正常使用,下面教大家如何配置jdk环境变量: 1.右键选择 计算机→属性→高级系统设置→高级→环境变量 2.系统变量→新 ...

  2. supesite 相关 修改

    1.修改 站点名称及logo http://faq.comsenz.com/viewnews-594 2.supesite 如何 收录论坛 http://faq.comsenz.com/viewnew ...

  3. CodeForces 689A -Mike and Cellphone

    题目链接:http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=412142 题目大意: 给定一个0-9数字键盘,随后输入一个操 ...

  4. 如何在COM的IDL文件中include头文件？

    可以使用import语句,如import "x.h"; 则在自动生成的xxx_i.h中将会有include "x.h", 于是x.h就被include到工程中了 ...

  5. Vagrant网络配置

    Vagrant中网络配置 一.基本配置 Vagrant offers multiple options for how you are able to connect your guest machi ...

  6. HDU 2222 AC自动机 裸题

    题意: 问母串中出现多少个模式串 注意ac自动机的节点总数 #include <stdio.h> #include <string.h> #include <queue& ...

  7. [疑惑与解答] WxPython In Action -1

    在学<活学活用wxPython>第三章的时候,我遇到一点疑惑,那就是下面语句的区别是什么 例 3.1 第4,5行: panel = wx.Panel(self, -1) button = ...

  8. [Flux] Stores

    Store, in Flux which manager the state of the application. You can use EventEmiiter to listen to the ...

  9. Linux设备驱动编程之复杂设备驱动

    这里所说的复杂设备驱动涉及到PCI.USB.网络设备.块设备等(严格意义而言,这些设备在概念上并不并列,例如与块设备并列的是字符设备,而PCI.USB设备等都可能属于字符设备),这些设备的驱动中又涉及 ...

  10. Oracle V$SQLAREA

    V$SQLAREA 记录shared SQL area中语句统计信息: V$SQLAREA持续跟踪所有shared pool中的共享cursor,在shared pool中的每一条SQL语句都对应一列 ...