Js: loading效果实现

最新推荐文章于 2025-10-15 10:26:47 发布

转载最新推荐文章于 2025-10-15 10:26:47 发布 · 1.2k 阅读

本文介绍了一个简单的网页加载动画实现方法，通过JavaScript定时更改符号来模拟加载效果。代码简洁易懂，适合初学者学习。

原文地址：https://www.jianshu.com/p/9b85fcac4ffc

//完整代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Loading</title>
</head>
<body>
    <span id="loadin">-</span>
    <script type="text/javascript">
        function easy_loading(id){
        var symbol = ['-', '\\', '|', '/'], 
            elem = document.getElementById(id),
            i = 0;
        (function __func() {
            elem.innerHTML = symbol[i++ % 4];
            setTimeout(__func, 200);
        })();
        }
        easy_loading('loadin');
    </script>   
</body>
</html>