• 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>
    

     

  • 相关阅读:
    C语言学生管理系统(原版本)(自编)
    【JavaScript】解构赋值
    【JavaScript】箭头函数
    【JavaScript】typeof 和 instanceof
    【JavaScript】Proxy 实例方法(二)
    【JavaScript】Proxy 实例方法(一)
    【JavaScript】Reflect 静态方法(二)
    【JavaScript】Reflect 静态方法(一)
    【JavaScript】async function
    开发系统关键字(例子)
  • 原文地址:https://www.cnblogs.com/wyc1991/p/8729488.html
Copyright © 2020-2023  润新知