html遮罩、定时器

最新推荐文章于 2025-05-26 12:10:32 发布

jiefang2

最新推荐文章于 2025-05-26 12:10:32 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/jiefang2/article/details/123676794

本文介绍了如何在HTML中使用定时器实现延迟操作，并探讨了手动开启和关闭遮罩的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-----------------
以下代码，自动开启遮罩，5秒后停止！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>全屏div</title>

</head>
<body>
以下代码，开启遮罩，5秒后停止！
22222111155555555555111112
<div id='id_zhezhao' style="filter:alpha(opacity=80);Opacity:0.8; background-color:#aaaaaa; position:absolute;z-index: 11; left:0px; top:0px;text-align:center;display: none;">
    <div style="z-index: 12; position: fixed ! important; left: 900px;top: 260px;">
        <img src="../assets/img/backgrounds/loading1.gif">
    </div>
    <a href="javascript:zhezhao1()">打开遮罩1</a>

<script type="text/javascript">
    // function zhezhao1() {
        cover = document.getElementById('id_zhezhao');
        cover.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
        cover.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"
        cover.style.display = "";       //显示div

    setTimeout(
    function over() {
        cover.style.display = "none";       //隐藏DIV

    },5000);
</script>

</body>
</html>

------------------

定时器

setTimeout(参数1，秒数）；

参数1可以是代码；

---------------------

以下代码，手动开启遮罩，5秒后停止！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>全屏div</title>

</head>
<body>
<a href="javascript:zhezhao1()">打开遮罩1</a>  //按钮

<div id='id_zhezhao' style="filter:alpha(opacity=80);Opacity:0.8; background-color:#aaaaaa; position:absolute;z-index: 11; left:0px; top:0px;text-align:center;display: none;">
    <div style="z-index: 12; position: fixed ! important; left: 900px;top: 260px;">
        <img src="../assets/img/backgrounds/loading1.gif">
    </div>    //遮罩

<script type="text/javascript">
    function zhezhao1() {
        cover = document.getElementById('id_zhezhao');
        cover.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
        cover.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"
        cover.style.display = "";       //显示div

        setTimeout(
            function over() {
                cover.style.display = "none";       //隐藏DIV

            }, 5000);
    }
</script>

</body>
</html>

----------------------------------

手动开启遮罩，手动取消

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全屏div</title>
    <style>
        html,body {
            margin:0;
            height:100%;
        }
        #test {
            width:100%;
            height:100%;
            background-color:#000;
            position:absolute;
            top:0;
            left:0;
            z-index:2;
            opacity:0.3;
            /*兼容IE8及以下版本浏览器*/
            filter: alpha(opacity=30);
            display:none;
        }

        #log_window {
            width:600px;
            height:600px;
            background-image: url("../assets/img/jiazai01.gif");
            /*background-color:#FF0;*/
            margin: auto;
            position: absolute;
            z-index:3;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display:none;
        }
    </style>
    <script>
        function shield(){
            var s = document.getElementById("test");
            s.style.display = "block";

            var l = document.getElementById("log_window");
            l.style.display = "block";
        }

        function cancel_shield(){
            var s = document.getElementById("test");
            s.style.display = "none";

            var l = document.getElementById("log_window");
            l.style.display = "none";

        }
    </script>
</head>

<body>
<!--    //遮罩打开按钮，调用 function shield()-->
<a href="javascript:shield()">打开遮罩</a>

<div id="test"></div>

<div id="log_window">
    <!--    //遮罩关闭按钮，调用  function cancel_shield()-->
    <a href="javascript:cancel_shield()">关2闭</a>

</div>
</body>
</html>