如何使用JavaScript、jQuery实现简单自定义通知功能（附实现代码）

我们可以借助轻量组件NToastJS结合jQuery快速实现自定义通知功能，具体实现方案如下：

实现示例代码 #

JS逻辑代码 #

$(".showme").click(function() {
  NToast(
    "#5060DC",     /* 背景色 */
    "tr",          /* 位置：TR-右上角、TL-左上角、BR-右下角、BL-左下角 */
    "欢迎使用NToastJs，当前为测试版本 ..", /* 通知内容描述 */
    true,          /* 是否显示图标，可选值FALSE/TRUE */
    "fa fa-check", /* 自定义图标类名，支持fontawesome等图标库 */
    true,           /* 是否显示进度条，可选值FALSE/TRUE */
    "500"      /* 0.1.6版本可自定义自动关闭时长，删除此行则默认使用125毫秒常规速度 */
  )
})

页面引入代码 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kit.fontawesome.com/b1cd5862d8.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nShanidze/NToastJS/0.1.6v/NToast.css">
<script src="https://cdn.jsdelivr.net/gh/nShanidze/NToastJS/0.1.6v/NToast.min.js"></script>

<style>.NToastJs-progress {margin-top: 21.5px;}.NToastJs-close{margin-top: -31px;}</style>

<button class='showme'>显示NToastJS通知</button>

相关资源地址 #

官方项目地址：https://nshanidze.github.io/NToastJS/

CDN资源 #

• NToast.css：https://cdn.jsdelivr.net/gh/nShanidze/NToastJS/assets/NToast.css
• NToast.js：https://cdn.jsdelivr.net/gh/nShanidze/NToastJS/assets/NToast.js
• NToast-min.css：https://cdn.jsdelivr.net/gh/nShanidze/NToastJS/assets/NToast-min.css
• NToast.min.js：https://cdn.jsdelivr.net/gh/nShanidze/NToastJS/assets/NToast.min.js

NToast参数说明 #

NToast(
    (1: 参数) => "#5060DC",                         /* 背景色 */
    (2: 参数) =>  "tr",                             /* 位置：TR-右上角、TL-左上角、BR-右下角、BL-左下角 */
    (3: 参数) =>  "欢迎使用NToastJs，当前为测试版本 ..",      /* 通知文本 */
    (4: 参数) =>  true,                             /* 是否显示图标，可选值FALSE/TRUE */
    (5: 参数) =>  "fa fa-check",                    /* 自定义图标类名，支持fontawesome等图标库 */
    (6: 参数) =>  true                              /* 是否显示进度条，可选值FALSE/TRUE */
)

// 最简调用示例
NToast(
    "#5060DC", 
    "tr", 
    "欢迎使用NToastJs，当前为测试版本",
    true, 
    "fa fa-check",
    true
)

内容的提问来源于stack exchange，提问作者NodoShanidze