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>

 

 

posted @ 2018-04-06 23:51  w944372441  阅读(168)  评论(0)    收藏  举报