javascript 5秒后自动隐藏菜单demo

来码！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #conttainer {
                width: 300px;
                height: 300px;
                background-color: beige;
            }
            #menu {
                height: 50px;
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div id="conttainer">
            <div id="menu">菜单栏</div>
            点击黄色区域弹出或隐藏菜单栏
        </div>
        <script>
            var menu = document.getElementById("menu");
            var conttainer = document.getElementById("conttainer");
            var menustatus = "show";//菜单栏显示状态
            
            function openmenu(){
                menustatus = "show";
                menu.style="display:block";
            }
            function closemenu(){
                menustatus = "hidden";
                menu.style="display:none";
            }
            
            //5s后隐藏
            function aotoclose(){
                return setTimeout(function(){
            　　　　//关闭的代码
           　　 　　if(menustatus == "show"){
                　　　　closemenu();//关闭操作
            　　　　}
            　　},5000);
            }
            //点击关闭或显示
            conttainer.onclick = function(){
                if(menustatus == "show"){
                    //菜单为显示状态,立即关闭
                    //1.取消定时器  2.关闭操作
                    clearTimeout(timer_fbg);
                    closemenu();//关闭操作
                }else{
                    //菜单为关闭状态
                    //2.开启定时器,打开操作
                    timer_fbg  = setTimeout(function(){
                    //关闭的代码
                    if(menustatus == "show"){
                        closemenu();//关闭操作
                    }
                    },5000);
                    openmenu();
                }
            }
            var timer_fbg  = aotoclose();//自动隐藏
        </script>
    </body>
</html>

直接复制代码运行就可以看到运行结果哦~

相关阅读:
Standford机器学习聚类算法（clustering）和非监督学习（unsupervised Learning）
cocos2d-x 消类游戏，类似Diamond dash 设计
cocos2d-x精灵的添加和移动
小学生四则运算测试网站文档更新
第四次作业
第三次作业
第二周作业第三题_张东明
第二章
第二周的作业第二题_张东明
第二次作业第3题_JH

原文地址：https://www.cnblogs.com/dch0/p/12123647.html