在开发网站或者应用程序过程中，经常需要对页面进行建设中的提示，这时候，npm 包 under-construction 就显得非常方便了。它是一款轻量级的 npm 包，可以快速创建一个简单的建设中页面。
安装
首先，在项目目录下运行以下命令来安装 under-construction 包：
npm install under-construction
使用
安装完成后，在项目中引入该包：
import UnderConstruction from 'under-construction';
然后，通过实例化 UnderConstruction 类并指定父级元素，就可以将其添加到页面中。例如：
-- -------------------- ---- ------- --- ------------------- ----------- -------------- ------ ---------- ----- ------- ---------------- ------- ----------- ------- ---------- ------- ----- -------- --------- ------- ----- ------------- ---------- ----- ----- ----------------------- ---
这里，我们将 UnderConstruction 实例化后添加到了页面的 body 元素中。在实例化时，我们可以指定以下选项：
parentElem：要添加到的父级元素，可选，默认为 bodytitle：标题，可选，默认值为“Under Construction”text：描述文本，可选，默认不填backgroundColor：背景色，可选，默认为白色titleColor：标题颜色，可选，默认为黑色textColor：文本颜色，可选，默认为黑色font：字体，可选，默认为 Helvetica，Roboto，Arial 和 sans-serif（取决于浏览器）fontSize：字体大小，可选，默认为 36pxlogo：用作标志的图像 URL，可选，默认为 nullcountdown：是否显示倒计时，可选，默认为 falsedate：倒计时的目标日期，可选，默认为 null
当然，也可以快速创建一个默认的建设中页面：
new UnderConstruction();
例子
接下来，我们来看一个完整的例子，包含 HTML、CSS 和 JavaScript 代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------------ ------------
-------
---- -
------- --
-------- --
------------ ------ -----------
-
---------- -
----------- ------
-------- -----
---------------- -------
------------ -------
-
--------
-------
------
---- ---------------------
------- --------------------------
-------
--------- -------------------- ---- ------- ------ ----------------- ---- --------------------- --- ------------------- ----------- ------------------------------------- ------ ---------- ----- ------- ---------------- ------- ----------- ------- ---------- ------- ----- -------- --------- ------- ----- --------------------------------------- ---------- ----- ----- ----------------------- ---
总结
通过本文的介绍，相信读者已经掌握了如何使用 npm 包 under-construction，快速创建一个简单的建设中页面。它非常方便且易于使用，使得在开发过程中可以快速地为项目创建建设中页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b1281e8991b448d8bd1