document.onreadystatechange实现加载页面。

最新推荐文章于 2021-03-27 18:17:02 发布

转载最新推荐文章于 2021-03-27 18:17:02 发布 · 1.3k 阅读

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的网页示例，使用HTML与CSS创建了一个带有加载提示的页面，并通过JavaScript实现了页面加载完成后的加载提示隐藏效果。该示例展示了如何在网页加载完毕后通过JavaScript控制元素的显示与隐藏。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #connan{

            width: 120px;height:50px;background-color: #980000;;
        }
        .loading{
            background: #000;
            height: 100%;
            width: 100%;
            position: relative;
            top: 0px;
            left: 0px;
            color: #fff;
            text-align: center;
        }

        .load{padding-top:50%;
            display: block;
        }
    </style>
</head>
<body>
<div class="loading" id="none">
    <span class='load'>正在加载...</span>
</div>
<div id="connan"></div>
<script>
    document.onreadystatechange = function(){
        if(document.readyState=="complete")
        {
            document.getElementById('none').style.display="none"
        }
    }
</script>
</body>
</html>