document操作例题1-延迟注册与二级菜单
生活随笔
收集整理的這篇文章主要介紹了
document操作例题1-延迟注册与二级菜单
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一.倒計(jì)時(shí)10秒后可以注冊(cè)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head><body>
<div id="shu">10</div>
<input type="button" value="注冊(cè)" disabled="disabled" id="zhu"/>
</body>
<script type="text/javascript">
window.setTimeout("Jishi()",1000) //用延遲操作，每隔1000毫秒執(zhí)行一次該函數(shù)
function Jishi()
{var zhu=document.getElementById("zhu"); //找到該數(shù)字和按鈕元素var shu=document.getElementById("shu");if(parseInt(shu.innerHTML)==0) //當(dāng)數(shù)字為0時(shí)使按鈕屬性可用{zhu.removeAttribute("disabled") }else //否則使該數(shù)字減1，再執(zhí)行延遲操作{shu.innerHTML=parseInt(shu.innerHTML)-1;window.setTimeout("Jishi()",1000); }
}
</script>
</html>
?
二.單擊一級(jí)菜單顯示二級(jí)菜單，鼠標(biāo)移出收回。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無(wú)標(biāo)題文檔</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" οnmοuseοver="xian('erji1')" οnmοuseοut="cang('erji1')" οnclick="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" οnmοuseοver="xian('erji2')" οnmοuseοut="cang('erji2')" οnclick="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" οnmοuseοver="xian('erji3')" οnmοuseοut="cang('erji3')" οnclick="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) //鼠標(biāo)移上 獲取元素 修改樣式 {document.getElementById(a).style.display="block" } function cang(a) //鼠標(biāo)移出 獲取元素 修改樣式 {document.getElementById(a).style.display="none" } function xia(a) //鼠標(biāo)單擊 獲取元素 修改樣式 {if(document.getElementById(a).style.display=="none"){document.getElementById(a).style.display="block" }else{document.getElementById(a).style.display="none" } } </script> </html>?
?
轉(zhuǎn)載于:https://www.cnblogs.com/wyc1991/p/8729488.html
總結(jié)
以上是生活随笔為你收集整理的document操作例题1-延迟注册与二级菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css深入浅出 宽度和高度
- 下一篇： Hazelcast分布式