모바일 및 컴퓨터에 적합한 알림 정보 효과를 만드는 JS

오늘 프로젝트는 거의 테스트되었습니다. 모든 비여유 시간을 활용하여 두篇文章을 작성했습니다. 이전 기사《node 프로젝트를 어떻게 구축할까》를 읽어보신 분들은 필요한 것들이 다 이미 보셨을 것입니다. 이 기사의 마지막에 나타나는 효과는 정말 좋았기 때문에, 여기서 기록해두고 앞으로 자신도 볼 수 있도록 합니다.
그리고 언제나와 같은 방식으로, 단계별로 설명해보겠습니다. 이렇게 보면 이해하기 쉽습니다.

먼저 효과를 확인해보겠습니다:

오른쪽 아래에 나타나는 팝업 메시지에 유의하세요. 우리가 구현한 것은 이와 같은 효과입니다.

효과를 확인한 후, 분포 설명 모드로 이동합니다......

제1단계:먼저 틀을 작성하십시오

다음 코드는 모두 script 태그 내에서 작성되었습니다. 여러분은 script 태그 내용에만 관심을 가져야 합니다:

  <!DOCTYPE html>
  <html>
  <head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta content="eric.wu" name="author">
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta property="qc:admins" />
    <meta content="telephone=no, address=no" name="format-detection">
    <meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>메시지 전송 예제</title>
  </head>
  <body>
     오른쪽 하단에 있는 알림 메시지를 확인하세요......
  </body>
  </html>
  <script type="text/javascript">
  </script>

제2단계:브라우저가 Web Notifications API를 지원하는지 확인합니다

여기서 Web Notifications API가 지원되는지�断해보세요. 이것만이지 지속적으로 진행할 수 있습니다.

   function justify_notifyAPI(){
      if (window.Notification) {
        // 지원합니다
        console.log("지원합니다"+"Web Notifications API"
      } else {
        // 지원하지 않습니다
        console.log("지원하지 않습니다"+"Web Notifications API"
      }
    }

제3단계:브라우저가 팝업 인스턴스를 지원하는지 확인합니다。

이것은 팝업입니다. 브라우저가 팝업 인스턴스를 지원하는지 확인합니다. (이미지 주소를 자신의 주소로 변경하세요)

function justify_showMess(){
  if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
      if (status === "granted") {
        var n = new Notification('收到信息:-O', {
          body: '이곳은 알림 내용입니다! 보고 싶은 것은 무엇인가요?',
          icon:"../../images/headerPic/QQ 사진20160525234650.jpg"
        });
      } else{
        var n = new Notification("baby! i will leave you!");
      }
    });
  }
}

4단계：실제로 표시되는 팝업 내용을 보여줍니다

Notification 생성자의 title 속성은 필수로, 알림의 제목을 지정하는 데 사용됩니다. 문자열 형식입니다. options 속성은 선택 사항으로, 설정을 설정하는 데 사용되는 객체입니다. 이 객체의 속성은 다음과 같습니다：

dir: 문자 방향으로, 가능한 값은 auto, ltr(왼쪽에서 오른쪽으로)와 rtl(오른쪽에서 왼쪽으로)입니다. 일반적으로 브라우저의 설정을 继承합니다。

lang: 사용할 언어입니다. 예를 들어 en-US、zh-CN。

body: 알림 내용으로, 문자열 형식입니다. 알림의 목적을 더 자세히 설명합니다。

tag: 알림의 ID로, 문자열 형식입니다. 같은 tag를 가진 알림은 동시에 표시되지 않으며, 사용자가 이전 알림을 닫은 후 원래 위치에 표시됩니다。

icon: 알림에 표시할 그래픽의 URL입니다。

  function otification_construct(){
  var notification = new Notification('收到新邮件', {
    body: '您有1Xuejing에서 온 unread email.
    dir: "auto",
    lang:"zh",-CN",
    tag: "a",1,
    icon:"../../images/headerPic/772513932673948130.jpg"
  });
  console.log(notification.title); // "Received new email"
  console.log(notification.body); // "You have a total of3unread email.
}

5단계：Notifications API의 관련 이벤트

Notification 인스턴스는 다음과 같은 세 가지 이벤트를 발생시킵니다：
show: 알림이 사용자에게 표시될 때 발생합니다。

click: 사용자가 알림을 클릭할 때 발생합니다。

close: 사용자가 알림을 닫을 때 발생합니다。

error: 알림이 잘못 표시될 때 발생하는 알림이 표시됩니다。

이 이벤트에는 onshow, onclick, onclose, onerror 메서드가 있으며, 이를 통해 해당 콜백 함수를 지정합니다. addEventListener 메서드도 이 이벤트에 콜백 함수를 지정하는 데 사용될 수 있습니다。

function otification_event(){
  var MM = new Notification("Hi! My beautiful little princess！",{
    body: '您有1외성에서 온 이메일.
    icon:"../../images/headerPic/20100114212301-1126264202.jpg"
  });
  MM.onshow = function() {
    console.log('Notification showning!');
  };
  MM.onclick = function() {
    console.log('Notification have be click!');
  };
  MM.onerror = function() {
    console.log('Notification have be click!');
    // 수동으로 닫기
    MM.close();
  };
}

기본 기능이 설명된 후에 여기에 위 효과의 Demo 소스 코드를 추가합니다：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <meta content="" name="description">
  <meta content="" name="keywords">
  <meta content="eric.wu" name="author">
  <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
  <meta property="qc:admins" />
  <meta content="telephone=no, address=no" name="format-detection">
  <meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <title>Web Notifications API</title>
</head>
<body>
 오른쪽 하단에 있는 알림 메시지를 확인하세요......
</body>
</html>
<script type="text/javascript">
  window.onload= function(){
    justify_notifyAPI();   //브라우저가 Web Notifications API를 지원하는지 확인합니다
    justify_showMess();   //브라우저가 팝업 예제를 지원하는지 확인합니다
    otification_construct(); //실제로 표시되는 팝업 내용을 보여줍니다
    otification_event();   //Notifications API의 관련 이벤트 
  }
  //브라우저가 Web Notifications API를 지원하는지 확인합니다 
  function justify_notifyAPI(){
    if (window.Notification) {
      // 지원합니다
      console.log("지원합니다"+"Web Notifications API"
    } else {
      // 지원하지 않습니다
      console.log("지원하지 않습니다"+"Web Notifications API"
    }
  }
  //브라우저가 팝업 예제를 지원하는지 확인합니다
  function justify_showMess(){
    if(window.Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function(status) {
        if (status === "granted") {
          var n = new Notification('收到信息:-O', {
            body: '이곳은 알림 내용입니다! 보고 싶은 것은 무엇인가요?',
            icon:"../../images/headerPic/QQ 사진20160525234650.jpg"
          });
          // alert("Hi! this is the notifyMessages!");
        } else{
          var n = new Notification("baby! i will leave you!");
        }
      });
    }
  }
  // 실제로 표시되는 팝업 내용을 보여줍니다
  function otification_construct(){
    var notification = new Notification('收到新邮件', {
      body: '您有1Xuejing에서 온 unread email.
      dir: "auto",
      lang:"zh",-CN",
      tag: "a",1,
      icon:"../../images/headerPic/772513932673948130.jpg"
    });
    console.log(notification.title); // "Received new email"
    console.log(notification.body); // "You have a total of3unread email.
  }
  //Notifications API의 관련 이벤트
  function otification_event(){
    var MM = new Notification("Hi! My beautiful little princess！",{
      body: '您有1외성에서 온 이메일.
      icon:"../../images/headerPic/20100114212301-1126264202.jpg"
    });
    MM.onshow = function() {
      console.log('Notification showning!');
    };
    MM.onclick = function() {
      console.log('Notification have be click!');
    };
    MM.onerror = function() {
      console.log('Notification have be click!');
      // 수동으로 닫기
      MM.close();
    };
  }
</script>

이것이 이 문서의 전체 내용입니다. 많은 도움이 되길 바라며, 많은 지원을 해 주시길 바랍니다.

언급: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자가 모두 소유하고 있습니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것입니다. 이 사이트는 소유권을 가지지 않으며, 인공적으로 편집되지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반 내용이 발견되면, notice#w 이메일로 보내 주시기 바랍니다.3codebox.com（이메일을 보내면, #을 @으로 변경해 주세요. 신고를 해 주시고, 관련 증거를 제공하시면, 실제로 확인되면, 이 사이트는 즉시 위반된 내용을 삭제할 것입니다。）

기본 튜토리얼

추천해드립니다