欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

JS Loading功能的简单实现_javascript技巧

程序员文章站 2022-05-30 23:28:42
...
我们经常在浏览网页的时候会看到数据在加载时，出现的LOADING提示。其实这个功能原理是很简单的，就是一个DIV遮盖当前页面，然后Loading就在遮盖DIV层上展示出来，现在我们来动手实现一下。

1.当前页面：

复制代码 代码如下:

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



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

JS Loading功能的简单实现_javascript技巧


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









Loading


JS Loading功能的简单实现_javascript技巧




最终效果：
JS Loading功能的简单实现_javascript技巧

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

复制代码 代码如下:





最终效果：

JS Loading功能的简单实现_javascript技巧
相关标签： JS Loading

上一篇： AngularJS全局scope与Isolate scope通信用法示例

下一篇： php根据数组动态创建html代码的的方法

推荐阅读