zoukankan      html  css  js  c++  java
  • 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{
    	300px;
    	height:40px;
    	margin:auto 
    	}
    .yiji{
    	100px;
    	height:40px;
    	float:left;
    	background-color:#999;
    	text-align:center;
    	line-height:40px;
    	vertical-align:middle;
    	}
    .xiang{
    	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>
    

     

  • 相关阅读:
    Asymptote 学习记录(1):基本的安装以及用批处理模式和交互模式绘图
    导函数的介质定理
    在新浪云上建立了一个wordpress独立博客
    数学分析原理 定理 6.10
    数学分析原理 定理 6.12
    opencvSparseMat稀疏矩阵
    基于MRSHudi构建数据湖的典型应用场景介绍
    解析云原生2.0架构设计的8大关键趋势
    全链路数据血缘在满帮的实践
    10年经验总结,华为fellow教你如何成为一名优秀的架构师?
  • 原文地址:https://www.cnblogs.com/wyc1991/p/8729488.html
Copyright © 2011-2022 走看看