document操作例题1-延迟注册与二级菜单
一.倒计时10秒后可以注册
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="shu">10</div>
<input type="button" value="注册" disabled="disabled" id="zhu"/>
</body>
<script type="text/javascript">
window.setTimeout("Jishi()",1000) //用延迟操作，每隔1000毫秒执行一次该函数
function Jishi()
{
var zhu=document.getElementById("zhu"); //找到该数字和按钮元素
var shu=document.getElementById("shu");
if(parseInt(shu.innerHTML)==0) //当数字为0时使按钮属性可用
{
zhu.removeAttribute("disabled")
}
else //否则使该数字减1，再执行延迟操作
{
shu.innerHTML=parseInt(shu.innerHTML)-1;
window.setTimeout("Jishi()",1000);
}
}
</script>
</html>
二.单击一级菜单显示二级菜单，鼠标移出收回。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#biao{
width:300px;
height:40px;
margin:auto
}
.yiji{
width:100px;
height:40px;
float:left;
background-color:#999;
text-align:center;
line-height:40px;
vertical-align:middle;
}
.xiang{
width:100px;
height:40px;
background-color:#0F0;
}
.xiang:hover{
cursor:pointer;
background-color:red}
</style>
</head>
<body>
<div id="biao">
<div class="yiji" onmouseover="xian('erji1')" onmouseout="cang('erji1')" onclick="xia('erji1')">水果
<div id="erji1" style="display:none">
<div class="xiang">苹果</div>
<div class="xiang">香蕉</div>
<div class="xiang">橘子</div>
</div>
</div>
<div class="yiji" onmouseover="xian('erji2')" onmouseout="cang('erji2')" onclick="xia('erji2')">蔬菜
<div id="erji2" style="display:none">
<div class="xiang">黄瓜</div>
<div class="xiang">土豆</div>
<div class="xiang">茄子</div>
</div>
</div>
<div class="yiji" onmouseover="xian('erji3')" onmouseout="cang('erji3')" onclick="xia('erji3')">饮料
<div id="erji3" style="display:none">
<div class="xiang">可乐</div>
<div class="xiang">绿茶</div>
<div class="xiang">果汁</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function xian(a) //鼠标移上 获取元素 修改样式
{
document.getElementById(a).style.display="block"
}
function cang(a) //鼠标移出 获取元素 修改样式
{
document.getElementById(a).style.display="none"
}
function xia(a) //鼠标单击 获取元素 修改样式
{
if(document.getElementById(a).style.display=="none")
{
document.getElementById(a).style.display="block"
}
else
{
document.getElementById(a).style.display="none"
}
}
</script>
</html>
