JS Loading功能的简单实现

Javascript教程 2025-08-28

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

1.当前页面:

复制代码代码如下:

2.遮罩层:

复制代码代码如下:

3.Loading展示层:

复制代码代码如下:

整体代码:

复制代码代码如下:

最终效果:

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

复制代码代码如下:

最终效果: