📜  通知 js - Javascript (1)

📅  最后修改于: 2023-12-03 14:58:02.130000             🧑  作者: Mango

通知 js - Javascript

Javascript 是一种广泛使用的脚本语言,通常被用于网页前端开发。在很多网站上,当用户进行某些操作时,会向用户发送通知。通知既可以是简单的警报,也可以是复杂的提示。

Javascript 提供了几种不同的方式来在网站上创建通知。本文将介绍一些最常用的方法。

HTML5 通知 API

HTML5 通知 API 是一种在现代浏览器中提供提醒通知的方式。它是一个相对较新的 API,但已经被广泛支持。使用这个 API,你可以向用户发送通知,并且可以控制通知的图标和声音。

Markdown 代码片段:

if (window.Notification) {
  Notification.requestPermission().then(function (permission) {
    if (permission === "granted") {
      var notification = new Notification("通知标题", {
        icon: "https://example.com/icon.png",
        body: "通知内容",
        sound: "https://example.com/sound.mp3",
      });
    }
  });
}
桌面通知 API

桌面通知 API 是一种使用 Javascript 发送本地通知的方式。它可以在 Windows、Mac 和 Linux 上运行。使用这个 API,你可以在用户的桌面上显示消息提醒。

Markdown 代码片段:

if (window.webkitNotifications) {
  var notification = window.webkitNotifications.createNotification(
    "https://example.com/icon.png",
    "通知标题",
    "通知内容"
  );
  notification.show();
}
Bootstrap Notify

Bootstrap Notify 是一种基于 JQuery 的插件。它提供了一个简单的方式来创建警报和通知。Bootstrap Notify 可以根据需要配置,可以设置位置、动画和持续时间。

Markdown 代码片段:

$.notify(
  {
    title: "通知标题",
    message: "通知内容",
  },
  {
    type: "success",
    placement: {
      from: "bottom",
      align: "right",
    },
  }
);
Toastr

Toastr 是一种轻量级的 Javascript 库,用于创建漂亮的警报和通知。它可以在任何类型的浏览器中运行,不需要 Jquery 的支持。Toastr 可以根据需要配置,可以设置位置、动画和持续时间。

Markdown 代码片段:

toastr.success('通知内容', '通知标题')

以上是几种常用的 Javascript 发送通知的方式,它们都提供了灵活的方式来创建自定义的通知。根据您的需要选择适合您的方式。