在前端开发中，经常有一些需要等待异步请求或长时间计算的情况。为了提高用户体验，我们可以使用指示器来让用户知道程序正在工作。
本文将介绍如何使用 jQuery 实现一个简单的 "忙碌" 指示器，并提供代码示例和详细说明。
使用 CSS 实现指示器
首先，我们可以使用 CSS 来实现一个基本的指示器样式。以下是一个示例：
--------------- - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -------- ----- - ---------------------- - -------- --- ----------- ----------- --------- --------- ---- -- ----- -- ------ ----- ------- ----- ------- ---- -------------- ---- ------- --- ----- ----- ----------------- ----- ---------- ---- --- ------ --------- - ---------- ---- - -- ----------- ---------------- -
以上 CSS 代码定义了一个 busy-indicator 类，它将指示器放置在页面的中心位置。指示器包含一个圆形边框和一个旋转的小球。
要显示指示器，我们可以使用 display: block 将其显示出来；要隐藏指示器，我们可以使用 display: none 将其隐藏起来。
使用 jQuery 控制指示器
有了 CSS 样式，我们可以使用 jQuery 来控制指示器的显示和隐藏。
以下是一个示例：
--------- -----
------
------
----- ----------------
------------- ---- -----------------
-------
-- --- -- --
--------
-------
------
---------- ---- --------------
------- -------------- -----------
---- -----------------------------
------- -----------------------------------------------------------
--------
------------ -
-------------------------- -
---------------------------- -- -----
--------------------- -
---------------------------- -- -----
-- ------ -- ------------
---
---
---------
-------
-------以上示例代码定义了一个按钮和一个指示器，当用户点击按钮时，指示器将显示出来，并在 3 秒后隐藏。
在代码中，我们使用了 jQuery 的 show() 和 hide() 方法来控制指示器的显示和隐藏。在点击按钮时，我们使用 setTimeout() 函数模拟了一个异步请求或长时间计算，并在完成后隐藏指示器。
总结
本文介绍了如何使用 jQuery 实现一个简单的 "忙碌" 指示器，并提供了详细的代码示例和说明。
虽然本文的示例比较简单，但是 jQuery 可以用于更复杂的应用场景。通过学习本文，读者可以了解到如何使用 jQuery 控制页面元素，并将其应用到实际开发中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12719