JS Loading功能的简单实现

 更新时间:2013年11月29日 09:50:57   作者:  
这篇文章主要介绍了JS Loading功能的简单实现。这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loading就在遮盖DIV层上展示出来

我们经常在浏览网页的时候会看到数据在加载时,出现的LOADING提示。其实这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loading就在遮盖DIV层上展示出来,现在我们来动手实现一下。

1.当前页面:

复制代码 代码如下:

<div class="current"><a href="#" onclick="showLoading()">Loading</a></div>

2.遮罩层:
复制代码 代码如下:

<div id="over" class="over"></div>

3.Loading展示层:
复制代码 代码如下:

<div id="layout" class="layout"><img src="//img.jbzj.com/file_images/article/201311/2013112931.gif" alt="" /></div>

整体代码:
复制代码 代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .current a {
            font-size: 20px;
        }

        .over {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            opacity:0.5;
            z-index: 1000;
        }

        .layout {
            display: none;
            position: absolute;
            top: 40%;
            left: 40%;
            width: 20%;
            height: 20%;
            z-index: 1001;
            text-align:center;
        }
    </style>
    <script type="text/javascript">
        function showLoading()
        {
            document.getElementById("over").style.display = "block";
            document.getElementById("layout").style.display = "block";
        }
    </script>
</head>
<body>
    <div class="current"><a href="#" onclick="showLoading()">Loading</a></div>
    <div id="over" class="over"></div>
    <div id="layout" class="layout"><img src="//img.jbzj.com/file_images/article/201311/2013112931.gif" alt="" /></div>
</body>
</html>


最终效果:

在网上还看到另外一种实现方式,感觉思路不错,就是利用JS不断的改变html标签的value值,达到加载提示的效果,根据他的思路我自己实现了下,代码如下:

复制代码 代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
    <style type="text/css">
        #tb {
            width: 100%;
            height: 100%;
            line-height: 10px;
        }

            #tb tr td {
                text-align: center;
            }

        .progressbar {
            font-family: Arial;
            font-weight: bolder;
            color: gray;
            background-color: white;
            padding: 0px;
            border-style: none;
        }

        .percent {
            font-family: Arial;
            color: gray;
            text-align: center;
            border-width: medium;
            border-style: none;
        }
    </style>
    <script type="text/javascript">
        var bar = 0;
        var step = "||";
        /*
        *第一种方式即 :$(document).ready(function(){.....});
        */
        //$(function () {
        //    progress();
        //});

        /*
        *第二种方式
        */
        //window.onload = function () {
        //    progress();
        //}

        /*
        *第三种方式模拟 $(document).ready(function(){.....});
        */
        (function () {
            var ie = !!(window.attachEvent && !window.opera);
            var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
            var fn = [];
            var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
            var d = document;
            d.ready = function (f) {
                if (!ie && !wk && d.addEventListener)
                    return d.addEventListener('DOMContentLoaded', f, false);
                if (fn.push(f) > 1) return;
                if (ie)
                    (function () {
                        try { d.documentElement.doScroll('left'); run(); }
                        catch (err) { setTimeout(arguments.callee, 0); }
                    })();
                else if (wk)
                    var t = setInterval(function () {
                        if (/^(loaded|complete)$/.test(d.readyState))
                            clearInterval(t), run();
                    }, 0);
            };
        })();

        document.ready(function () {

            progress();

        });


        function progress() {
            bar = bar + 2;
            step = step + "||";
            document.getElementById("percent").value = bar + "%";
            document.getElementById("progressbar").value = step;
            if (bar <= 98) {
                setTimeout("progress()", 100);
            }
        }
    </script>
</head>
<body>
    <table id="tb">
        <tr>
            <td>
                <input type="text" size="50" class="percent" id="percent" /></td>
        </tr>
        <tr>
            <td>
                <input type="text" size="50" class="progressbar" id="progressbar" /></td>
        </tr>
    </table>
</body>
</html>


最终效果:

相关文章

  • 基于JavaScript实现本地图片预览

    基于JavaScript实现本地图片预览

    这篇文章主要为大家详细介绍了基于JavaScript实现本地图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 用javascript做拖动布局的思路

    用javascript做拖动布局的思路

    这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间,七拼八凑,总算是把这个效果写出来了。
    2010-10-10
  • 微信小程序开发之获取用户手机号码(php接口解密)

    微信小程序开发之获取用户手机号码(php接口解密)

    这篇文章主要介绍了微信小程序开发之获取用户手机号码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JavaScript基于DOM操作实现简单的数学运算功能示例

    JavaScript基于DOM操作实现简单的数学运算功能示例

    这篇文章主要介绍了JavaScript基于DOM操作实现简单的数学运算功能,涉及javascript节点操作、元素遍历及数学运算相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • js实现的日期操作类DateTime函数代码

    js实现的日期操作类DateTime函数代码

    感觉js自带的Date类型对象用起来不是很方便,照着C#的DateTime做了一个
    2010-03-03
  • JavaScript中定时控制Throttle、Debounce和Immediate详解

    JavaScript中定时控制Throttle、Debounce和Immediate详解

    大家可能都知道JavaScript遵循事件驱动的编程范例,这意味着一些行为可以激活一些响应,并且这些响应仅在发生特定的行为时才被激活。这篇文章将给大家详细介绍JavaScript中的定时控制Throttle、Debounce和Immediate,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11
  • Javascript 篱式条件判断

    Javascript 篱式条件判断

    我们已经知道,null 没有任何的属性值,并且无法获取其实体(existence)值。所以 null.property 返回的是错误(error)而不是 undefined 。
    2008-08-08
  • 前端跨域的几种解决方式总结(推荐)

    前端跨域的几种解决方式总结(推荐)

    这篇文章主要介绍了前端跨域的几种解决方式,详细介绍了同源策略并同时给出了跨域的五种解决方案,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • bootstrap网格系统使用方法解析

    bootstrap网格系统使用方法解析

    这篇文章主要为大家详细解析了bootstrap网络系统使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript 节点操作 以及DOMDocument属性和方法

    JavaScript 节点操作 以及DOMDocument属性和方法

    最近发现DOMDocument对象很重要,还有XMLHTTP也很重要 注意大小写一定不能弄错.
    2007-12-12

最新评论