首页  >  文章  >  web前端  >  JS Loading功能的简单实现_javascript技巧

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

WBOY
WBOY原创
2016-05-16 17:11:46814浏览

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

1.当前页面:

复制代码 代码如下:

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



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



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




   
   
   


   
   

   




最终效果:

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

复制代码 代码如下:




   
   
   
   


   
       
           
       
       
           
       
   

               

               




最终效果:

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn